animationプロパティは、アニメーションに関するプロパティをまとめて指定できるショートハンドプロパティです。
animationプロパティで指定する値は、各プロパティ「animation-name」、「animation-duration」、「animation-timing-function」、「animation-delay」、「animation-iteration-count」、「animation-direction」、「animation-fill-mode」、「animation-play-state」と同じで、それぞれ半角スペースで区切って指定します。
省略した場合は、各プロパティの初期値が適用されます。
次の2つのコードは同じ意味です。
animation: ex-animation 10s 2s ease infinite;
}
animation-name: ex-animation;
animation-duration: 10s;
animation-delay: 2s;
animation-timing-function: ease;
animation-iteration-count: infinite;
}
keyframesでアニメーションの動きを指定しています。
0%{width: 50px;height: 70px;}
100px{width: 200px;height: 70px;}
}
上の赤いボックスは、10秒間で幅が50pxから200pxまで変化するアニメーションが何回も繰り返し実行するようにしています。
関連記事
『@keyframesでアニメーションの動きを指定【CSS】』
『animation-nameでアニメーション名をつける【CSS】』
『animation-durationでアニメーション完了までの時間を指定【CSS】』
『animation-delayでアニメーション開始までの時間を指定【CSS】』
『animation-play-stateでアニメーションの再生・一時停止を指定【CSS】』
『animation-timing-functionでアニメーションの進行度を指定【CSS】』
『animation-fill-modeでアニメーションの再生中・再生後のスタイルを指定【CSS】』
『animation-iteration-countでアニメーションの実行回数を指定【CSS】』
『animation-directionでアニメーションの再生方向を指定【CSS】』
Leave a Comment