こんにちは。
CSSアニメーションの勉強をしていると、アニメーションを繰り返して無限にループさせたい時ってありますよね。
そこでanimation-iteration-countプロパティをinfiniteにしてもなんか挙動がおかしいことってありませんか？
おそらく原因はanimation-directionプロパティの設定です！
animation-directionプロパティはアニメーションの繰り返し後の挙動を制御するためのCSSプロパティなのですが、あまり馴染みがないので知らない人も多いのではないかと思います。
そこで今回は、animation-directionプロパティの
をサンプルコードと一緒に解説していきます！！
目次
animation-directionとは
animation-directionの読み方
animation-directionは「アニメーション ディレクション」と読みます。
directionは日本語で「方向」を意味しますが、animation-directionプロパティは簡単に言えばアニメーションを順方向か逆再生かを設定するためのプロパティになります。
animation-directionは再生の際に逆再生させるかどうか、または繰り返し再生する中でどのタイミングで逆再生させるのかを設定するプロパティ
animation-directionの用途を具体的にいうと、
です。なんだか用途が多くて難しそうなプロパティですね。
もう少し噛み砕きましょう。
animation-directionプロパティは再生回数が1回かそれ以上かで用途が2つあります。
アニメーション回数が1回の場合は
アニメーション回数が2回以上の場合は
という2つの用途があります。これらは後々サンプルコードを用いて解説していきます！
animation-directionで利用できる値
animation-directionプロパティでは以下の値を使うことができます。
| 値 | 説明 |
|---|---|
| normal | 常にキーフレーム通りに再生します。(初期値) |
| reverse | 常に逆に再生します。 |
| alternate | 繰り返しの際、キーフレーム通りの再生と逆再生を順に繰り返します。 |
| alternate-reverse | 繰り返しの際、逆再生とキーフレーム通りの再生を順に繰り返します。 |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 完全対応 |
| Firefox | 完全対応 |
| Internet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 完全対応 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
animation-directionの基本的な使い方
それでは、animation-directionプロパティの各値の挙動をサンプルコードと一緒にみていきましょう！
normal
normalはanimation-directionプロパティの初期値でもあり、キーフレーム通りにアニメーションを再生させることになります。
See the Pen
animation-direction–normal by ryuga (@ryuga)
on CodePen.
アニメーションを細かくみていくと、キーフレームに指定した順番に赤→黄→緑→青→紫に円の背景色が変化していっていますね。
reverse
reverseを指定すると、キーフレームに指定したアニメーションを逆再生します。
See the Pen
animation-direction–reverse by ryuga (@ryuga)
on CodePen.
今度は先ほどとは逆で、紫→青→緑→黄→赤の順で再生されているのがわかります。
このように、animation-directionプロパティを指定することによって、再生の方向を指定することができます。
alternate
再生回数が複数回ある場合に使用するのがalternateです。
alternateを指定すると、アニメーションの繰り返しの際に順方向と逆再生を繰り返します。
See the Pen
animation-direction–alternate by ryuga (@ryuga)
on CodePen.
アニメーションをみてみると、1回目はキーフレームに指定した順番の赤→黄→緑→青→紫と再生されますが、紫になった後、紫→青→緑→黄→赤と逆再生されているのがわかります。そしてまたキーフレーム通りの順に…
と順方向と逆再生を繰り返しているのがわかると思います。
アニメーションをループさせたい時に挙動がおかしかった場合はまずこのanimation-directionをalternateにしてみるといいかもですね！
alternate-reverse
最後はalternate-reverseです。
勘の良い方はお気づきかもしれませんが、これはalternateの逆バージョンといったところです。
alternateは順方向→逆再生→順方向…だったのに対し、
alternate-reverseは逆再生→順方向→逆再生…の順で再生されます。
See the Pen
animation-direction–alternate-reverse by ryuga (@ryuga)
on CodePen.
まとめ
いかがでしょうか？
今回はanimation-directionプロパティの基本的な使い方を紹介しました。
CSS3のアニメーションはJavaScriptで実装する同程度のアニメーションよりも軽量であることから、今後さらに普及していく技術だと考えられています。
この機会にぜひ使い方をマスターしてコーディングに取り入れましょう！！
参考文献：http://www.htmq.com/css3/animation-direction.shtml
