[CSS]さりげないアクセントとして面白い、キーフレームを使ったCSS3アニメーション

ウェブページのさりげないアクセントとして、エレメントをほんの少しだけ動かすキーフレームを使ったCSS3アニメーションを紹介します。

Replacing Subtle Flash Animations with CSS3
デモページ

[ad#ad-2]

アイデアの元になったのは「84Colors」で、Flashで実装されています。

84Colors

上記のサイトと同じような繊細なアニメーションをCSS3で実装します。
※目立つようにCSS3アニメーションは少し誇張されています。

デモページ：葉っぱがゆらゆらとアニメーション

デモページ：リスがひょこっと現れて、尻尾と葉っぱがゆらゆらとアニメーション
リスは瞬きとかもします。

CSS3アニメーションをサポートしていないブラウザでは、静止した状態で表示されます。

IE7でのキャプチャ（アニメーションは静止状態で表示）

[ad#ad-2]

キーフレームを使ったCSS3アニメーションのスタイルシートは、下記のようになります。

CSS

1枚目の葉っぱのスタイルシート。
※ヘッダの葉っぱは同様に4枚の葉っぱをコントロールします。

.deco {
	position: absolute;
}

.leaf-1 {
	left: 670px;
	-webkit-animation: leaf1 2s ease infinite alternate 0;
	top: -32px;
}

@-webkit-keyframes leaf1 {

	from {
	}

	to {
		-webkit-transform: 	rotate(11deg)
					translateX(-6px);
	}
}

※デモページでは「-moz-」も使用しています。