先週バタバタしていたせいでサイコロを振り忘れてました。。
1回指摘されて気づいたのですが、
なんか他の人も忙しそうだし後で振ればいいやとか思ってしまったばっかりに…。
連休中に思い出してとても悲しくなりました。
通常CSSアニメーションの書き方
CSS3のアニメーションに関してはpearmasterさんが以前記事を書いてるのでそちらを見てください。
【やぁみんな】CSS3のanimationを使ってみる【久しぶり！】
ざっくりとした説明だとこんなかんじ
//アニメーションの設定
#hoge {
-webkit-animation-name: hogeani; //アニメーション名
-webkit-animation-duration: 1.5s; //1ループの時間
-webkit-animation-timing-function: ease-out; //アニメーションの変化
-webkit-animation-iteration-count: infinite; //ループ処理
}
//キーフレームの設定
@-webkit-keyframes 'hogeani'{
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(3deg);
}
}
こんなかんじであと-moz-(Firefox用)、-o-(Opera用)、-ms-（IE用）と同じ処理を書いてやる必要があります。。
トッテモメンドクサイデスネ。。
※ちなみにChromeだとアニメーションの設定を1行でまとめて書いてもきちんと動きますが、
Firefoxだとうまく動いてくれませんでした…。
-webkit-animation:hogeani 1.5s ease-out infinite;//Chromeで動くよ！ -moz-animation:hogeani 1.5s ease-out infinite;//Firefoxでは動かないよ！
Sassでサクっと書く
Sass&CompassでPath風のメニューを作ってみた – ウォンビン ビール瓶。で紹介されている_animation.scssと_keyframes.sassを読み込むだけで、めんどくさいベンダプレフィックスもはしょることができます。
#hoge {
@include animation-name(hogeani);
@include animation-duration(1.5s);
@include animation-timing-function(ease-out);
@include animation-iteration-count(infinite);
}
@include keyframes(hogeani) {
from {
@include transform(rotate(0deg));
}
to{
@include transform(rotate(3deg));
}
}
※Sass-3.2.0から動きます。
すっきりしていて良いですね！