@keyframesとanimation
@keyframesとanimationプロパティをセットで使うとcssでもアニメーションの設定ができます
この記事の目次
@keyframes
@keyframesはアニメーションの開始から終了までの間にどの様な動きをするかを設定するcssの文法
@keyframesの後に半角スペースを入れて名前を記述し波カッコを打ち込み この波カッコの中に設定を記述していく
1 2 3 4 5 6 7 8 9 10 |
@keyframes 好きな名前 { 0% { 開始時のCSSプロパティ:値; } 100%{ 終了時のCSSプロパティ:値; } } |
0%は開始時・100%は終了時を表しておりセレクタのような役割になっている
0~100の間であれば細かくcssを設定していくことも可能
animation系プロパティ
animation系のプロパティを指定することで、アニメーションに関するいろいろな設定ができます
animation系のプロパティは、全部で8種類ありますが、animation用のショートハンドプロパティを使うとまとめて記述できます。
animation-name
アニメーションの名前を指定するプロパティ
@keyframesで設定した名前を入れて使う
※ 必須項目
animation-duration
アニメーションが終わるまでの時間を設定するプロパティ
使える単位は
s:秒
ms:ミリ秒
※ 必須項目
animation-timing-function
変化の度合いを指定するプロパティ
簡単なものだけ紹介
ease | 初期値開始時と終了時は緩やかに変化します。 |
ease-in | 開始時は緩やかに変化、終了に近づくと早く変化します。 |
ease-out | 開始時は早く変化し、終了時は緩やかに変化します。 |
ease-in-out | 開始時と終了時は、かなり緩やかに変化します。 |
linear | 開始から終了まで一定に変化します。 |
step-start | 開始時に最終の状態になります。 |
step-end | 終了時に最終の状態になります。 |
animation-delay
アニメーションが始まる時間を遅らせる設定をするプロパティ
使える単位は
s:秒
ms:ミリ秒
animation-iteration-count
アニメーションの繰り返し回数の設定
初期値は「1」数値を入れて使う
無限に繰り返すときは「infinite」
animation-direction
アニメーションの再生方向の指定
normal | 毎回、指定した通り(順方向)のアニメーションが再生 |
reverse | 毎回、逆方向からのアニメーションが再生 |
alternate | 順方向、逆方向のアニメーションを交互に繰り返す |
alternate-reverse | 逆方向、順方向のアニメーションを交互に繰り返す |
animation-fill-mode
アニメーション開始前・終了後のスタイルを指定するプロパティ
初期値はnone
none | アニメーションで指定したスタイルは、アニメーションの開始前、終了後には適用されない |
forwards | アニメーション終了時のスタイルがアニメーション終了後にも適用される |
backwards | アニメーション開始時のスタイルがアニメーション開始前にも適用される |
both | forward と backwards の両方が適用される |
animation-play-state
アニメーションの再生・停止を指定するプロパティ
running:再生
paused:停止
animation
上記のすべてを纏めて設定するショートハンドプロパティ
順不同で設定できる
durationとdelayは単位が同じなので先に書いたほうがdurationとして設定される点だけ注意
※ nameとdurationは必須なので設定すること