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

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





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




syntax。

animation-direction: bbnormal/ bbreverse/ bbalternate/ bbalternate-reverse ;


こんにちは、「ふ」です。
今回はCSSアニメーションのanimation-directionについて紹介します。

directionとは「方向・方角」という意味で、CSSアニメーションの再生方向を指定するプロパティです。

animation-directionを指定することにより、逆方向から再生したり、順方向/逆方向を交互に繰り返す、といったことも可能です。
「要素の動きを往復させたい」ときなどには、必須のプロパティ。キーフレームを作り込むよりも断然手軽です。
ぜひ学習していってください。

4つの値サンプル。


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

 ① normal(初期値。順方向から再生)

 ② reverse(逆方向から再生)

 ③ alternate(順方向→逆方向を繰り返し)

 ④ alternate-reverse(逆方向→順方向を繰り返し)


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

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

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

 ① normal。

animation-direction:「「1normal」」;

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

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

 ② reverse。

animation-direction:「「1reverse」」;

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

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



 ③ alternate。

animation:sample 2s linear 「「44」」 infinite; animation-direction:「「1alternate」」;

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

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

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

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

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



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

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



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

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

 ④ alternate-reverse。

animation:sample 2s linear 「「44」」 infinite; animation-direction:「「1alternate-reverse」」;

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

timing-functionとの関係。


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

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

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

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

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

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

つまり。

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

animation-direcition:「「1alternate」」;

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

alternateは必須。


最後までお読みくださり、ありがとうございます。
今回はCSSアニメーションの再生方向を指定する、animation-directionについて紹介してきました。記事の途中でもお話ししましたが、中でも「alternate」はとても便利な指定です。
繰り返しのアニメーションには必須の値とも言えるでしょう。

扨(さて)次回はCSSアニメーションの終了時の状態を指定する、animation-fill-modeについて紹介します。今回のanimation-directionと密接な関係を持つプロパティです。

また一緒に学習していきましょう!ではまた〜 ♩



CSSアニメーション、発火のタイミングを制御する。

〽️ 好きなタイミングで発火/消火。











「ふ」です。

swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。