@keyframesとanimation

CSS2018.10.31

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

この記事の目次

@keyframes

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

@keyframes 好きな名前 {
    0% {
      開始時のCSSプロパティ:値;
    }

    100%{
      終了時のCSSプロパティ:値;
    }

}

1

2

3

4

5

6

7

8

9

10

@keyframes 好きな名前 {

0% {

開始時のCSSプロパティ:値;

}

100%{

終了時のCSSプロパティ:値;

}

0%は開始時・100%は終了時を表しておりセレクタのような役割になっている
０～１００の間であれば細かくcssを設定していくことも可能

animation系のプロパティを指定することで、アニメーションに関するいろいろな設定ができます
animation系のプロパティは、全部で8種類ありますが、animation用のショートハンドプロパティを使うとまとめて記述できます。

アニメーションの名前を指定するプロパティ
@keyframesで設定した名前を入れて使う
※ 必須項目

アニメーションが終わるまでの時間を設定するプロパティ
使える単位は
s：秒
ms：ミリ秒
※ 必須項目

変化の度合いを指定するプロパティ
簡単なものだけ紹介

アニメーションが始まる時間を遅らせる設定をするプロパティ
使える単位は
s：秒
ms：ミリ秒

アニメーションの繰り返し回数の設定
初期値は「1」数値を入れて使う
無限に繰り返すときは「infinite」

アニメーションの再生方向の指定

アニメーション開始前・終了後のスタイルを指定するプロパティ
初期値はnone

none	アニメーションで指定したスタイルは、アニメーションの開始前、終了後には適用されない
forwards	アニメーション終了時のスタイルがアニメーション終了後にも適用される
backwards	アニメーション開始時のスタイルがアニメーション開始前にも適用される
both	forward と backwards の両方が適用される