FC2ブログ

animationを使ってアニメーション

animationを使ってアニメーション

animationなら
transitionより複雑なアニメーションができる

transitionは、プロパティの変化の仕方を指定しただけ
animationては、
キーフレームを使うことで
様々な制御が可能

キーフレームは@keyframes
というキーワードを使い指定する

@keyframesの
キーフレームの設定は
アニメーション全体に対するバーセンテージで表す

最初は 0%
中間は 50%
最後が 100%
となり
このバーセンテージで示したところに
スタイルを適用することで
キーフレーム間でアニメーションが実現する

@keyframesの書式は

@keyframes アニメーション名{
0% { 変化させるプロパティ : 値; }
25% { 変化させるプロパティ : 値; }
....
100% {変化させるプロパティ : 値 }
}
となる
スポンサーサイト



コメント

非公開コメント

最新記事
検索フォーム
GREEハコニワ攻略サイト
リンク
カテゴリ
月別アーカイブ
フリーエリア
最新記事
FXプライムレート
最新コメント
最新トラックバック