css

【CSS】animationプロパティの使い方

2020/11/07

CSS3のanimationプロパティはCSSでアニメーションさせる際によく使われるプロパティで、複数のCSSプロパティをまとめてアニメーションさせることを可能にします。

animationプロパティの特徴として、『@keyframes』を使ってアニメ―ションの時間変化を設定するところでしょう。『@keyframes』を使うことにより、アニメーションの時間による変化を細かく設定することが可能となります。

以下このエントリでは、「animationプロパティの基本的な使い方」や、animationプロパティと同様にCSSを使ってアニメーションさせる時によく使う「transitionプロパティとの違い」についても説明します。

animationの基本的な使い方

animationプロパティは大きく以下の2つの要素から構成されています。

❶ animationプロパティを使ってアニメ―ションの再生方法の設定。
❷「@keyframes」を使ってアニメーションの時間よる変化(タイムライン)を設定

まず「❶ animationプロパティを使ってアニメ―ションの再生方法の設定」の所でアニメーションの再生方法、再生時間、タイミングなどアニメ―ションの再生の仕方について、後述する8つのプロパティを使用して設定します。

次に、で設定した方法で再生させたいアニメーションを、「@keyframes」を使って記述します。

詳しい記述方法やプロパティの使い方については後述します。

See the Pen 20201106-anim01 by muko (@mkpn) on CodePen.

8つのプロパティ

animationプロパティは以下の8つのプロパティを使って設定します。
各プロパティは省略可能ですが、省略した場合は各プロパティの初期値になります。

animation-name

@keyframesで指定した任意のアニメーション名。初期値はnone。

animation-duration

再生時間。初期値は0s。

animation-timing-function

アニメーション速度の変化の仕方。初期値はease。

ease アニメーションの開始時から加速していき、終了に向けて減速。初期値。
ease-in アニメーション開始時はゆっくりで、終了に向けて徐々に加速。
ease-out アニメーション開始時は速く、終了に向けて徐々に減速。
ease-in-out アニメーション開始時はゆっくりで加速していき、終了に向けて減速。
linear 最初から最後まで一定の速度。
step-start 開始直後にすぐに最後までジャンプ。
step-end 最後にアニメーションの最後にジャンプ。
steps
(正数, start または end)
指定した正数のステップ数でアニメーションし。startを設定するとすぐアニメーションが開始し、endを設定すると一拍おいてからアニメーションが開始。
cubic-bezier
(x軸の値, y軸の値, x軸の値, y軸の値)
自由にアニメーションの変化を設定できます。X軸は時間の経過、Y軸は変化を表します。参考までに下記のリンクからcubic-bezierの数値を見た目で生成できます。

cubic-bezierジェネレーター

See the Pen 20201106-anim02 by muko (@mkpn) on CodePen.

animation-delay

アニメーションが開始されるまでの時間。初期値は0s。

animation-iteration-count

アニメーションの再生回数・ループ指定。初期値は1。

infinite 無限にループ。
正数 指定した回数再生される。

animation-direction

アニメーションが再生する方向。初期値はnormal。

normal 順方向にアニメーションが再生される。初期値。
reverse 逆方向(逆再生)でアニメーションが再生される。
alternate 順方向と逆方向のアニメーションを繰り返す。
alternate-reverse 逆方向と順方向のアニメーションを繰り返す。逆方向からアニメーションが開始。

animation-fill-mode

アニメーション前後のプロパティの状態。初期値はnone。

none アニメーション時に適応されるスタイルは、アニメーションの再生前、再生後共に適用されない。初期値。
forwards 再生後も、アニメーション終了時のスタイルが適用。
backwards 再生前は、アニメーション開始時のスタイルが適用。
both forwardsとbackwardsが適用される。つまり、再生前はアニメーション開始時のスタイル、再生後はアニメーション終了時のスタイルが適用される。

animation-play-state

アニメーションが一時停止中なのか、再生中なのかを指定。初期値はrunning。

running アニメーションが再生されます。初期値。
paused アニメーションが一時停止する。

animationのショートハンド

各プロパティは、まとめて(ショートハンド)記述することができます。

animation-duration(再生時間) / animation-timing-function(時間の変化) / animation-delay(開始の遅延) / animation-iteration-count(ループ・再生回数設定) / animation-direction(再生方向) / animation-fill-mode (再生前後の状態) / animation-play-state(停止中or再生中)  / animation-name(名前)

(例)animation: 5s ease-in-out 2s 3 alternate both paused move-block;

@keyframesの設定方法

「@keyframes」を使うことでアニメーションの時間経過による変化を設定します。
設定方法は「from/to」を使う方法と、「%(パーセント)」を使う方法の2種類があります。
「%(パーセント)」で設定する方が、アニメーションの変化をより細かく設定できます。

基本形from/toで指定する

@keyframes アニメーション名 {
  from {
   CSSプロパティ:値;
  }
to {
    CSSプロパティ:値;
  }
}

アニメーション名は任意で自由に設定できます。

fromの部分にアニメーション開始時のCSSのプロパティ、toの部分にアニメーション終了時のCSSのプロパティを記述します。from部分、to部分ともに複数のCSSプロパティを設定することができます。

See the Pen 20201106-anim01 by muko (@mkpn) on CodePen.

%(パーセント)で指定する

@keyframes アニメーション名 {
 0% {
    CSSプロパティ:値;
  }
  100% {
    CSSプロパティ:値;
  }

0%でアニメーションが開始し、100%で終了します。
また、0%、30%、60%、100%など細かく設定することも可能です。

See the Pen 20201107-anime03 by muko (@mkpn) on CodePen.

animationとtransitionの違い

animationプロパティはアニメーションのループ、自動再生や、再生回数の指定など、再生方法について細かい設定が可能です。

一方、transitionプロパティはマウスオーバー(hover)や、javascriptなどを使い「class」や「id」を付与するなどをトリガーとしてアニメーションが発動します。
また、transitionプロパティはループ再生などができないので、ループ再生させる場合は、animationプロパティを使用します。

【css】transitionの使い方


-css

© 2020 MUKOLOG