CSS3のアニメ
|
|
|
|
|
|
2010/02/20
CSS3ことはじめ、として、絶対ぜったいやってみたかったアニメに挑戦してみました。
SafariやChromeとかで、もう使えるっぽいCSS3のアニメーション。
CSS3、調べはじめたてってぐらいなんですが、自分でも思う、なんでまた（笑）
だって、動かせたら楽しいじゃないですか！（爆）
すごいことはできてないんですが、動かせるようにするまでのまとめみたいなものです。はい。
デモ
SafariかChromeでご覧くださいませ～。
説明
まずアニメに関するCSS規則（CSS Rules？）を作り、アニメさせたい要素のスタイルをつける際に、作ったCSS規則を指定してあげるとアニメが動くようです。
CSS規則について
@-webkit-keyframes '名前'{～～}という感じで作ってあげるみたいです。
@-webkit-keyframes 'wink'{
0%{
opacity : 1;
}
50%{
opacity : .5;
}
100%{
opacity : 1;
}
}
0%の時がアニメの最初、100%がアニメの終了時の状態を示しています。
その間でなにかしたければ、*%で記述してあげればオッケ。
%で指定してあげることもできますし、もし、0%→100%しかないのであれば、 from{～～} to{～～}という表現でもよいみたいです。
こんなかんじ。
@-webkit-keyframes 'wink'{
from{
opacity : 1;
}
to{
opacity : 0;
}
}
また、%表記の場合、同じ状態になるならカンマ区切りでまとめることもできるみたいです。
@-webkit-keyframes 'wink'{
0%,100%{
opacity : 1;
}
50%{
opacity : .5;
}
}
キーフレームの設定の中では、必ず最初と最後の設定がなされてないとうまく動いてくれませんでした。
一番少なくても、fromとto、0%と100%が必要ということのようです。
アニメーションの設定について
次に、定義したアニメを実際つかうところについて。
アニメさせたい要素のところで、webkit-animationプロパティを使って名前を呼んであげます。
#sample01 ul li a:hover{
-webkit-animation-name : 'wink'; // アニメ名
-webkit-animation-duration : 1s; // 実行時間
-webkit-animation-timing-function : ease-in; // イージング
-webkit-animation-iteration-count : 1; // 実行回数
-webkit-animation-direction : alternate; // 通常再生か、逆再生か
-webkit-animation-play-state : running; // 再生状態
-webkit-animation-delay : 1s; // 実行までの待ち時間
}
ショートハンドを使って表現することもできます。
#sample01 ul li a:hover{
-webkit-animation : 'wink' 1s ease-in 1s 1 ; // name duration timing_function delay iteration_count
}
プロパティ
-webkit-animation
アニメに関する設定を一度に記述する。name duration timing_function delay iteration_countの順番。
-webkit-animation-name
つけるアニメの名前を指定する。カンマ区切りで複数指定可能。
-webkit-animation-duration
アニメが一周するまでの時間を指定する。1s = 1秒。
（ms = 1ミリ秒でも指定できるらしいが、やってみたらうまくいかなかった）（しょぼんぬ）
初期値は0なので、全くアニメしない、ということ。
-webkit-animation-timing-function
アニメの動きについて設定する。イージングをどうかけるか、のようなこと？
ease,linear,ease-in,ease-out,ease-in-outのどれかを指定。
-webkit-animation-iteration-count
アニメを繰り返すかどうかを指定。
数字もしくはinfinite（ループ）。
-webkit-animation-direction
アニメを通常再生するか、逆回転させて再生するか。
normal,alternateのどちらかを指定。
-webkit-animation-play-state
アニメを動かすか動かさないか。
running,pausedのどちらかを指定。
-webkit-animation-delay
何秒後にアニメを開始するか。1s = 1秒。