CSSアニメーション animationプロパティの使い方

よこのじ(@yokonoji_work)です。

この記事は、CSSの animation プロパティの使い方についてまとめています。

CSSアニメーションを使ってページに動きを付けると、シンプルなデザインでも華麗に魅せることができますし、デザインの独自性を高めることができます。

そう思ったのは、yui540さん(@yui540)のWebサイト「臆病な魔女は、Webサイトに魔法をかけた。」や「由比ヶ浜結衣生誕2018 – 非公式サイト」を見たからです。

こちらの動画もCSSアニメーションで構成されているようです。

そんなわけで、CSSアニメーションに興味を持ってもらえたと思いますので、勉強していきましょう。

animation プロパティ

animation プロパティとは、次の8つのプロパティの値を一括して設定できるプロパティです。

  • animation-name:@keyframes で作った規則の名前を設定する(初期値 none)。
  • animation-duration:アニメーション開始から終了まで(アニメーション周期)の時間を設定する(初期値 0s)。
  • animation-timing-function:アニメーション制御の方法を設定する(初期値 ease)。
  • animation-delay:アニメーションの開始時間を設定する(初期値 0s)。
  • animation-iteration-count:アニメーションの繰り返し回数を設定する(初期値 1)。
  • animation-direction:アニメーションの再生方向(順方向、逆方向)を設定する(初期値 normal)。
  • animation-fill-mode:アニメーションの開始時と終了時の状態を設定する(初期値 none)。
  • animation-play-state:アニメーションの実行と停止を設定する(初期値 running)。

これらのプロパティはスペースで区切って記述できます。

.class {
    animation : none 0s ease 0s 1 normal none running;
}

animation-name の値

@keyframes で作った規則の名前を設定

下の例ではnameが規則の名前で、自由に名前を付けることができます。

@keyframes とは、アニメーションの開始地点、中間地点、終了時点の属性の状態を指定するためのものです。from(開始)、to(終了)のように書くこともできますし、0%, 30%, 100%と細かく指定することもできます。

@keyframes name {
    from { width: 10%; }
    to     { width: 100%; }
}
@keyframes name {
    0%     { width: 10%; }
    30%   { width: 50%; }
    100% { width: 50%; }
}

animation-duration の値

アニメーション開始から終了まで(アニメーション周期)の時間を設定

こちらは、durationを1秒, 2秒, 3秒, 4秒にそれぞれ設定しています。設定された時間をかけてアニメーションが変化しているのが分かりますね。

duration

この値は1s ,2sのように記述し、0.5s, 500msのように短い時間も指定することができます。

animation-timing-function の値

アニメーション制御の方法を設定

この値は、アニメーションの変化の加速曲線を指定します。最初は遅くてだんだん速く、最初は速くてだんだん遅く、のように動きを制御できます。

  • ease:開始時は急加速して終了時は緩やか
  • ease-in:徐々に加速する
  • ease-out:開始時に急加速して徐々に緩やかになる
  • ease-in-out:緩やかに加速して緩やかに停止する
  • linear:一定の速度
  • step-start(steps(5, start)のように記述):指定したステップ数で動き、アニメーション開始時にステップが発生
  • step-end(steps(5, end)のように記述):指定したステップ数で動き、アニメーション開始時の初期状態で1ステップカウント
  • cubic-bezier(x1, y1, x2, y2)(cubic-bezier(0.1, 1.0, 0.3, 0.2)のように記述):任意の加速を設定できる

こちらが実際に動かしたときの様子です(アニメーション時間3s)。

timing-function

多くの場合は ease(イージング)で対応できそうですが、カクカク動くstepsや、動きに変化を付けられるcubic-bezierを使いたくなる場合もあるかもしれませんね。

MDN web docsには、各値の加速の様子を表したグラフがありますので、参考にしてください(下のグラフはease)。

easeの加速

animation-delay の値

アニメーションの開始時間を設定

delayの値を設定すると、要素ごとにアニメーションの開始時間を遅らせることができます。下の例では上から1s, 2s, 3s, 4sに設定しています。

animation-delay

ディレイは-1sのように負の時間を指定することもできます。この場合はアニメーションの1秒経過時点からの動作開始となり、遅延時間は0sです(即時開始)。

animation-iteration-count の値

アニメーションの繰り返し回数を設定

アニメーションの実行回数を指定するプロパティです。下の例は、上から1, 1.3, 2, infinite です。infinite の場合は無限に繰り返す動作をします。

animation-iteration-count

animation-direction の値

アニメーションの再生方向(順方向、逆方向)を設定

値には normal, reverse ,alternate, alternate-reverse を指定することができます。

animation-direction

  • normalは、初期位置からアニメーションの終了位置まで動きます。
  • reverseは、normalにおけるアニメーションの終了時点から動作を開始します。
  • alternateは、順方向に動き出して終了時点から折り返して往復するような動作をします。
  • alternate-reverseは、reverseと同じ位置が開始地点となり、往復動作します。

animation-fill-mode の値

アニメーションの開始時と終了時の状態を設定

アニメーションの開始位置の制御や、終了時に状態を保持させるかどうかの指定をすることができます。

none, forwards, backwards, both を値として指定できます。これも実際の動きを見てもらうと理解いただけるかと思います。

animation-fill-mode

  • normalは、アニメーションとは関係ないCSSの指定に従って、開始位置と終了位置が決まります。
  • forwardsは、開始位置はnormalと同じですが、終了位置は最終状態を保持したままとなります。
  • backwardsは、@keyframesで定めたアニメーションの初期状態(0%)が開始位置となります。上の例では、@keyframesで開始位置を移動範囲の20%としていますので、normalやforwardsとはズレた位置になっています(そのため、normalやforwardsは開始直後0%から20%の位置に飛んでいます)。
  • bothは、forwardsとbackwardsの性質を両方持ったものです。

animation-play-state の値

アニメーションの実行と停止を設定

このプロパティには running(実行中)、paused(停止中)の値を指定できます。

pausedに切り替えると、アニメーションの途中の状態を保持して停止します。その後runningに切り替えると、途中状態から再開させることが可能です。

animation-play-state

animation-play-state

 

 

CSSアニメーションを扱えるようになると、表現の幅が広がりそうですね!