CSSアニメーション、
animation-directionで再生方向を指定。

〽️４つの値サンプル。 〽️timing-functionとの関係。 〽️alternateは必須。

• CSSアニメーション、作り方。
  

  2020.04.17
  webアニメーションを１から学ぼう♪

⬆︎CSSアニメーションについてのまとめページはこちら。

４つの値サンプル。

CSSアニメーションのanimation-directionには、４つの値が用意されています。

１つずつサンプルを使って見ていきましょう。元となるCSSアニメーションのコードはこちら⬇︎。

#sample { animation:sample 2s linear infinite; } @keyframes sample ｛ bbfrom { margin-left:0%; } bbto { margin-left:90%; } ｝

要素が左から右へと移動していくアニメーションです。

　① normal。

animation-direction:「「１normal」」;

animation-directionの初期値は「normal」、通常の再生方向です。
キーフレームで指定した内容のとおりにCSSアニメーションが再生されます。

繰り返した場合、そのつど「進捗0%」の位置に戻ってから再生されます。

　② reverse。

animation-direction:「「１reverse」」;

CSSアニメーションの再生方向が逆に成増。
繰り返した場合も毎回、逆方向から再生されます。

以下⬇︎２つは、CSSアニメーションを繰り返す場合に有効な値です。

　③ alternate。

animation:sample 2s linear 「「４4」」 infinite; animation-direction:「「１alternate」」;

alternateは「交互に、互い違いに」という意味です。
サンプルはanimation-iteration（繰り返し回数）を「4」とした場合。

初回は順方向から再生、２回目は逆方向から再生されます。その後も奇数回/偶数回ごとに順/逆再生を繰り返します。

〜この「alternate」が最も実用的です。

#sample { animation:sample 2s infinite; } @keyframes sample ｛ bb0% { /*「「２はじめの状態」」*/ } bb100% { /*「「５おわりの状態」」*/ } ｝

こんなCSSアニメーションがあったとします。
この動きを往復させたい。

#sample { animation:sample 「「２4s」」 infinite; } @keyframes sample ｛ bb0% { /*「「２はじめの状態」」*/ } bb50% { /*「「５おわりの状態」」*/ } bb100% { /*「「２はじめの状態」」*/ } ｝

animation-durationを２倍の「4s」にして、キーフレームの50%で区切る方法もありますが、

#sample { animation:sample 2s infinite 「「１alternate」」; }

一括指定の中にanimation-directionの値を一言添えるだけで、再生方向を反転させながらアニメーションさせることができます。

　④ alternate-reverse。

animation:sample 2s linear 「「４4」」 infinite; animation-direction:「「１alternate-reverse」」;

alternate-reverseは、その名の通りalternateの動きをリバースさせています。
先程のalternateが「初回：順方向」から始まったのに対し、alternate-reverseは逆再生から始まります。その後も、偶数回は順方向、奇数回は逆方向からの再生を繰り返します。

timing-functionとの関係。

ここまで４つの値の動きを見てきました。ところでなのですが、CSSアニメーションの進行に関するプロパティとして、animation-timing-functionがあります。animation-directionと掛け合わせた場合、どのような動きをするのでしょうか？

これは「ease-in」の進捗をあらわす曲線です。ゆっくりとした進捗ではじまり、その後一定の進行具合となっています。
このease-inを適用したCSSアニメーションを逆再生するとどうなるのでしょうか？逆方向に再生しても「スロースタート」になる？？

sample2 { animation:sample2 2s 「「４ease-in」」 infinite; animation-direcition:「「１normal」」; }

先づは初期値の「normal」がこちら。指定どおり、ゆっくりと始まっています。
では再生方向を逆にしてみましょう。

sample2 { animation:sample2 2s 「「４ease-in」」 infinite; animation-direcition:「「１reverse」」; }

結果はこの⬆︎ように。
「スロースタート」にはならず、終わりに向かうにつれ進捗がゆっくりとなっていきます。

つまり。

CSSアニメーションの再生方向を逆にしても、timing-functionは反転しない、ということです。あくまでキーフレームだけが逆転する、ということですね。

animation-direcition:「「１alternate」」;

そのほうが都合が良かったりもします。
「alternate」を指定すると、ボールを壁打ちしているようなCSSアニメーションになりました（笑）