animation-direction

[animation-direction]は、アニメーション1回（keyframe 0%→100%の変化）のアニメ動作の方向を指定できる。順方向が0%→100%、逆方向が100%→0%を指す。

例1の内容【animation-directionサンプル】

2sでアニメ繰り返し(infinite)
A アニメ開始状態の位置。translate(50px)… 0%
B アニメ終了状態の位置。translate(200px)… 100%
1 animation-direction指定なし
2 normal; …animation-direction指定なしと同じ
3 alternate; …反転再生(順→逆→順→…)
4 reverse; …ずっと反転(逆→逆→逆→…)
5 alternate-reverse; …反転から開始(逆→順→逆→…)

アニメの順方向
A=[0% translate(50px)] → B=[100% translate(200px)]
4(reverse)、5(alternate-reverse)はOpera/Safariが未サポート(2014.06時点)。
※opera v30 は動いた。(2015.07 確認)

例1のアニメ設定、キーフレーム設定を表示

例1へ

例2の内容【逆方向アニメを作るのが面倒な時はreverse】

未対応だったoperaも、ガンダマーには ザク50 っぽいイメージ(意味不明)の opera30 で reverseやalternate-reverseが動いていたのでほぼwindows PC のユーザ対象webなら使ってもいいのではないかと思われます。macのための safari が対応しているのかどうかは不明ですが…。
追記 2018.0213 : 先日見てみると、Opera50 になってました。

サンプルのアニメ動作は「左から右へ、大きくまわって回転し、そこで止まる(見えなくなるのは角度が90degだから)。回転の中心は面から奥側に100pxの位置」となってます。
青背景の方は逆方向に動作。アニメが0%から50%で回転し、50%から100%まではそこで停止する指定なので、逆方向の場合、最初は停止したまま50%まで動かない、ということになり、二つのboxが重ならないようになってます。

このサンプルのテクニックは、50%,100%のような記述でアニメ設定すると、「50%まで変化し、以降は100%までそのスタイルを維持したまま＝変化が止まる＝アニメが停止」のようなキーフレームの作り方です。 reverseは反対の動作なので、最初は変化しない状態で停止した感じになります。 すなわち、順逆アニメを二つ、同じ位置で同時に動かすけれど、重ならないようにできる（開始遅延の指定が必要ない）という点です。 （重なるようにしたいのなら、0-100%で変化させるのを順逆同時に動かす）

ついでに、単純な左右スライドではないので、文字が微妙に変形するので、なんとなく色の具合と合わさって、立体っぽく浮き出たような気がしますが…原森の目が悪いからそう見えるだけかもしれません。

例2のアニメ設定、キーフレーム設定を表示

例2へ

例3の内容【マウスホバーでアニメがreverse】

面倒なアニメを作った時に逆再生的なアニメはreverseで、のもう一つの例です。
こちらはbefore afterを使ってボックスのボーダー部分を赤く塗ってるように見えるアニメを作りました。この面倒なボーダー塗りアニメをマウスホバーで反転させてます。

このアニメは「CSS実験のマウスホバーアニメボタン」の【div1個 + css (transition or animation) + :before , :after でいろいろ作ってみたサンプル】の一つで、タブメニュー3つ目のボーダーアニメ5でも掲載しています。そのページではマウスホバーでアニメが動くタイプになっています。
作り方についてのアイデアは、
「:before」の方が、ボーダー上を伸び縮みしながら左上、左下、右下、右上、左上へと移動するアニメになっていて、
「:after」の方は、上下左右のボーダーカラーを、「:before」の動作に合わせてなんかうまいことそう見えるように変更している、
それらを調整して組み合わせた、というような、めんどくさいものになっています。

面倒な作り方の理由は、html文法的に意味のない、余計なspanやdivを増殖させずに、div1個とその before , after のみで作るルールで作っているからです。
※ HTML構文として意味のない演出用の span を使いまくるのがokの場合、それぞれのボーダー用のspanを用意することで簡単に作れます。

マウスホバーでアニメが逆再生…は確かに逆に動いてはいますが、ホバー前の状態からすぐ反転、には見えない時も時々あるような気もしますが、多分ブラウザさんの計算誤差なのだろうなどと勝手に思ったりしてます…。

例3のアニメ設定、キーフレーム設定を表示

例3へ

animationのプロパティ

animation-name CLICK

適用するキーフレーム(アニメ名)を指定。カンマ区切りで複数指定ができる。

animation-duration CLICK

1回のアニメーション時間を指定。1s 等と指定。初期値の0sはアニメーションを実行しない設定。

animation-timing-function CLICK

キーフレームの始まりから終わりまでの間のアニメの仕方を指定

キーフレームのブロック内で定義されたアニメーションタイミング関数は、そのキーフレームに対して適用されます。一方、キーフレームでタイミング関数が指定されていない場合は、アニメーション全体に対して指定されたタイミング関数が使用されます。(引用：[MDN] animation-timing-function )

3次ベジェ曲線で変化を設定。開始点Aと終了点Dは決まってるので、Aからの接線ポイントBやDからの接線ポイントCを指定。
A,B,C,D は それぞれA(xa,ya)=A(0,0), D(xd,yd)=D(1.0,1.0)は省略で、
BとCの座標をcubic-bezier(xb,yb,xc,yc)で指定する。
変化量は文字でも可能。
ease = cubic-bezier(0.25, 0.1, 0.25, 1.0) (初期値)
linear = cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in = cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out = cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out = cubic-bezier(0.42, 0, 0.58, 1.0)

animation-delay CLICK

アニメ開始の待ち時間を指定。1s 等。
初期値=0(すぐに開始)。負の値の場合、過去にさかのぼって開始されていたアニメのと中からはじまる。

animation-iteration-count CLICK

アニメーションを繰り返す回数。1 や 2 などと数値、又は infinite (無期限に繰り返す)。
アニメ周期の一部を実行する場合、整数以外の値(例：0.5なら半分だけ実行)を指定も可能。

animation-direction CLICK

アニメの繰り返し時に、逆方向か最初の状態から再び開始するか、の繰り返しの方法を指定。

normal…順方向のアニメーションのみ(デフォルト)

alternate…初回 順方向、次に逆方向、以降、順、逆…と実行。(順 逆 順 逆 …)

reverse…逆方向のアニメーションのみ

normal…順方向のアニメーションのみ(デフォルト)

alternate-reverse…初回 逆方向、次に順方向、以降、逆、順…と実行。(逆 順 逆 順 …)

animation-fill-mode CLICK

アニメの実行前や実行後に適用するスタイルを指定。

normal…アニメで指定されたスタイルは、アニメの実行前や実行後には適用されない。

forwards…アニメの最後に適用された状態を維持する。通常は100%やtoのスタイルになる。※animation-directionが alternate、animation-iteration-count が偶数の場合は0%やfromのスタイルとなる。

backwards…0%やfrom キーフレームで定義された値を即座に適用し、animation-delay プロパティで指定した時間の間、その状態を維持する。

both…forwards と backwards の両方の規定に従う。なのでアニメの設定が実行前と実行後の両方に適用される。

animation-play-state CLICK

アニメを一時停止、再開などを指定する設定。この仕様については、マウスホバーでrunningとpausedを切り替えるなどを想定してるのではないかと思う。

ページトップへ