Web制作のアレコレ

@keyframesとanimation

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

@keyframes

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

CSS


@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は必須なので設定すること