CSS3でアニメーション効果を作成する

関連属性:

@keyframes ルール: アニメーションを定義します

構文: @keyframes アニメーション名{キーフレームセレクター {CSS スタイル;}}

animationname: アニメ名

キーフレームセレクター: アニメーション時間のパーセンテージ (0%~100%) (0% を意味) から (100% を意味)

CSS スタイル: 設定するスタイル

たとえば、myanimation という名前のアニメーションを定義します:

@keyframesmyanimation{

0% {font-size:10px;}

50% {font-size:30px;}

100% {font-size:100px;}}

アニメーション属性: 次の属性の複合です

animation-name: アニメーションの名前

animation-duration: アニメーションの完了時間

aniamtion-timing-function: アニメーション速度設定 (linear/ease/ease-in/ease-out/ease-in-out)

animation-delay: アニメーションが開始するまでの遅延間隔

animation-iteration-count:再生回数(n/無限)

animation-direction: アニメーションの再生方向(正転/逆転