CSS3のanimationでイケメンを見るには

前回の続きではなく

今回はCSS3のanimetionについて

CSSだけでアニメーションできるらしいので

JS好きの危機感でちょろっとだけさわってみました。

[HTML]

[ベースのCSS]
直接アニメには関係ないですが、初期位置とかを設定しています。

.anime {
	width: 300px;
	height: 200px;
	position: relative;
	background-color: #000;
	overflow: hidden;
}
.anime img {
	width: 180px;
	height: 180px;
	top: 10px;
	position: absolute;
	opacity: 0;
}

[アニメーション用のCSS]
「ani1」という名前のアニメーションを定義してます。
中身はなんとなくわかると思いますが、
%時点のスタイルを｛｝の中に記述するだけです

@-webkit-keyframes 'ani1' {
	0% {left: -180px; opacity: 0;}
	40% {left: 60px; opacity: 1;}
	100% {left: 480px; opacity: 0;}
}

[アニメーション開始用のCSS]
animeクラスのhoverで中のイケメン画像に
上で定義した「ani1」というアニメーションを実行します。
(なんか日本語変だけどその辺は雰囲気でｗ)

.anime:hover img {
	-webkit-animation: 'ani1' 2s ease 0 1 normal;
}

※イケメンが見たい方はchromeかsafariでどうぞ
CSSだけでイケメン表示できたけど
アニメーション止まらないし
そもそも対応ブラウザ少ないしまだまだJSぐへへｗ