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


前回の続きではなく

今回はCSS3のanimetionについて

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

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

[HTML]

achamaro.jpg
[ベースの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」というアニメーションを実行します。
(なんか日本語変だけどその辺は雰囲気でw)
.anime:hover img {
	-webkit-animation: 'ani1' 2s ease 0 1 normal;
}
※イケメンが見たい方はchromeかsafariでどうぞ
achamaro.jpg

CSSだけでイケメン表示できたけど
アニメーション止まらないし
そもそも対応ブラウザ少ないしまだまだJSぐへへw

 
Recent Comment
Categories
Writer
  • hidetarou
  • acha_maro
  • gazza069
  • sin_ya
  • yossy222
  • marionnettezero
  • TUYO
  • shiovo
  • yani_arcana
  • momiji0510
  • keiko_www
  • toma_max
  • kyonmaru
  • __senta
  • kenzo
  • t_suzuki
  • hikari_f
  • macchii
  • mashu