Weblasts

@keyframesとanimation

@keyframesanimationプロパティをセットで使うとcssでもアニメーションの設定ができます

@keyframes

@keyframesはアニメーションの開始から終了までの間にどの様な動きをするかを設定するcssの文法
@keyframesの後に半角スペースを入れて名前を記述し波カッコを打ち込み この波カッコの中に設定を記述していく

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アニメーション開始時のスタイルがアニメーション開始前にも適用される
bothforward と backwards の両方が適用される

animation-play-state

アニメーションの再生・停止を指定するプロパティ
running:再生
paused:停止

animation

上記のすべてを纏めて設定するショートハンドプロパティ
順不同で設定できる

durationdelayは単位が同じなので先に書いたほうがdurationとして設定される点だけ注意
※ nameとdurationは必須なので設定すること

POPULAR