[@keyframes、animation]CSSアニメーションの使い方[後編]

今回は、CSSアニメーション[後編]ということで『@keyframes、animation』の使い方を解説していきます。

CSSアニメーション[前編]では、『transition、transform』の使い方を解説していますので、気になる方は、以下のリンクよりぜひ！

[transition、transform]CSSアニメーションの使い方[前編]

CSSアニメーションの使い方[@keyframes]

@keyframesとは？

@keyframesは、アニメーションの開始から終了時までに、どのようにアニメーションするかを指定するCSSです。

@keyframesの設定方法

@keyframesは、『from、to』で設定する方法と『％』で設定する方法があります。

『%』でアニメーションを指定する場合は、中間地点のアニメーションを設定することが出来ます。

使用例

//fromとtoで設定する場合
@keyframes 任意の名前 {
 from {
   //開始時
   プロパティ(widthなど): 値(50%);
 }
 to {
　　//終了時
   from内と同じプロパティ(widthなど): 値(100%);
 }
}

//%で設定する場合
@keyframes 任意の名前 {
 0% {
   //開始時
   プロパティ(widthなど): 値(10%);
 }
 50% {
　　//中間地点
   プロパティ(widthなど): 値(40%);
 }
 70% {
　　//中間地点
   プロパティ(widthなど): 値(70%);
 }
 100% {
   //終了時
   プロパティ(widthなど): 値(100%);
 }
}

実際の使用例

See the Pen jOraNwO by ryu (@ryu-no-sss) on CodePen.

すでに、お気づきの方もいらっしゃると思いますが、@keyframesは、animationプロパティを使用しないと使えません！

ということで、animationの解説をしたいと思います。

CSSアニメーションの使い方[animation]

animationとは？

animationプロパティは、@keyframesで設定したアニメーションを呼び出す指定をし、アニメーションの掛かる時間や繰り返しの回数などを設定するために使います。

animationのプロパティの種類

animationプロパティの種類

animation-name	@keyframesでつけた名前を指定
animation-duration	アニメーションの開始から終了時までの時間を指定
animation-delay	アニメーションが開始する時間を指定
animation-timing-function	アニメーションの開始から終了時までの動きに変化を加える
animation-iteration-count	アニメーションを繰り返す回数を指定
animation-direction	アニメーションの再生方向を決める
animation-fill-mode	アニメーションの開始前と終了時のスタイルをそのまま使用するか指定
animation-play-state	アニメーションを再生または停止するかを指定
animation	上記8つのプロパティをまとめて指定

それぞれのプロパティの値

animation-nameの値

animation-nameの値は、@keyframesで設定した名前を指定します。

.line {
  animation-name: low;
}

@keyframes low{
  0% {
    width: 0;
  }
  25% {
    width: 80%;
  }
  50% {
    width: 100%;
  }
  75% {
    width: 120%;
  }
  100% {
    width: 100%;
  }
}

animation-durationの値

animation-durationの値は、ms(ミリ秒)または、s(秒)で指定します。

また、animation-durationを指定しないと、アニメーションが実行されないため必ず設定するようにしましょう！

.line {
  animation-name: low;
  animation-duration: 4s;
}

@keyframes low{
  0% {
    width: 0;
  }
  25% {
    width: 80%;
  }
  50% {
    width: 100%;
  }
  75% {
    width: 120%;
  }
  100% {
    width: 100%;
  }
}

animation-delayの値

animation-delayの値は、ms(ミリ秒)または、s(秒)で指定します。

.line {
  animation-name: low;
  animation-duration: 4s;
  animation-delay: 2s;
}

@keyframes low{
  0% {
    width: 0;
  }
  25% {
    width: 80%;
  }
  50% {
    width: 100%;
  }
  75% {
    width: 120%;
  }
  100% {
    width: 100%;
  }
}

animation-timing-functionの値

以下、主なanimation-timing-functionの値の種類です。

ease

ease-in

ease-out

ease-in-out

linear

step-start

step-end

それぞれの値の動き方

See the Pen vYKWwGW by ryu (@ryu-no-sss) on CodePen.

animation-iteration-countの値

以下、主なanimation-iteration-countの値の種類です。

正数(0、1、2・・・)

infinite・・・無限に繰り返す

.line {
  animation-name: low;
  animation-duration: 4s;
  animation-delay: 2s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}

@keyframes low{
  0% {
    width: 0;
  }
  25% {
    width: 80%;
  }
  50% {
    width: 100%;
  }
  75% {
    width: 120%;
  }
  100% {
    width: 100%;
  }
}

animation-directionの値

以下、主なanimation-directionの値の種類です。

normal

reverse

alternate

alternate-reverse

それぞれの値の動き方

See the Pen rNLpNJp by ryu (@ryu-no-sss) on CodePen.

animation-fill-modeの値

以下、主なanimation-fill-modeの値の種類です。

none

forwards

backwards

both

それぞれの値の動き方

See the Pen oNLpLRR by ryu (@ryu-no-sss) on CodePen.

animation-play-stateの値

以下、主なanimation-play-stateの値の種類です。

running・・・アニメーションが実行される

paused・・・アニメーションを停止させる

.line {
  animation-name: low;
  animation-duration: 4s;
  animation-delay: 2s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
  animation-play-state: running;
}

@keyframes low{
  0% {
    width: 0;
  }
  25% {
    width: 80%;
  }
  50% {
    width: 100%;
  }
  75% {
    width: 120%;
  }
  100% {
    width: 100%;
  }
}

animationの値の設定方法

animationは、今まで紹介した8つのプロパティをまとめて設定することが出来ます。

使用例

animation: animation-nameの値 animation-durationの値 animation-delayの値 animation-timing-functionの値 animation-iteration-countの値 animation-directionの値 animation-fill-modeの値 animation-play-stateの値;

animation: line 2s 0.5s ease 3 reverse forwards running;

注意点 ・値と値の間は、半角スペースで空ける。 ・記述の順番に決まりはありませんが、『animation-duration』と『animation-delay』は、どちらも時間の指定になるため、秒数の指定が2つある場合は、先に記述されている方が『animation-duration』の指定として処理されます。

まとめ

@keyframes　➡️　アニメーションの開始から終了時までに、どのようにアニメーションするかを指定する。 animation　➡️　@keyframesのアニメーションを呼び出し、アニメーションの掛かる時間や繰り返しの回数などを指定する。

それでは最後まで読んでいただきありがとうございました。