CSS animation
CSSで実装されているアニメーション機能の例です。JavaScript を利用しなくても CSS のみで表現できる動的表現があります。
- ad -
設定方法は以下です。
- 1.@keyframesでアニメーション名と動作を定義する。
@keyframes anime_name { from {...} to {...} }
- 2.定義したアニメーション名を各タグエレメントのanimation-nameプロパティやanimation-durationプロパティなどで反映させる。
div.test { animation-name: anime_name; animation-duration: 2s; }
CSSでアニメーションを設定するには以下のプロパティを利用します。
Property | 摘要 |
---|---|
アニメーション定義 | |
@keyframes | アニメーションの元を定義します。 |
各エレメントに定義 | |
animation-name | @keyframesで定義した名称を指定します。 |
animation-duration | 完了するまでの時間を秒(sec)で指定します。 |
animation-delay | 動作を開始するまでの待ち時間を秒(sec)で指定します。 |
animation-iteration-count | 繰り返し回数を指定します。 |
animation-direction | 順方向、逆順と再生順を設定することができます。 |
animation-timing-function | 再生速度に変化をもたらすことができます。 |
animation-fill-mode | 再生されていない間のスタイルプロパティを設定します。 |
animation | 上記の一括指定ができます。 |