animation-duration

[animation-duration]は1回のアニメの動作時間を指定します。
注意点は、animation-duration がキーフレームの 0% から 100% までの秒数を指定する点で、 反転アニメの場合、（作り手視点の想定では）2倍の時間でワンセットのアニメとなります。
つまり、animation の秒数を 1s で指定した場合、 反転を含めて作ったものは 2s のアニメということです。

例1の内容【同じアニメを同じ秒数で並べたもの】

反転アニメだからといって、秒数が半分になるということはない、という確認です。
0% : キーフレーム0%のスタイル（top:0px）
100% : キーフレーム100%のスタイル（top:50px）
A : キーフレームの0%から100%の変化を 2s で1回、以降、繰り返し。
B : キーフレームの0%から100%の変化を 2s で1回、100%から0%の変化を 2s で1回 (反転アニメ) 、以降、繰り返し。
Bが往復するのに 4s 必要で、その間にAが2回動きます。

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

例1へ

例2の内容【秒数違いサンプル】

あまり意味はないけれど、同じ反転繰り返しアニメを1sずつ違う秒数にしたものです。キーフレームは例1と同じです。
※ 0% top : 0px 、100% top : 50px と指定しただけのアニメです。
A:1s B:2s C:3s D:4s で動作します。

アニメ設定を表示

例2へ

例3の内容【秒数をバーで表現】

ローディングイメージっぽく、1sで伸びる青色バーと、10sを steps(10,start) でカウントする赤色バーを box の before after で配置したサンプルです。上のバーは最初に1s遅延させて調節しています。

2つのアニメは [0% width : 0px → 100% width : 180px] という動作をする同じアニメを反転せず繰り返しているだけですが、
animation-duration の秒数と animation-timing-function の変化の仕方が違うものとなっています。

gifアニメなどを複数並べて動きを同期させようとすると、画像の読み完了等をjavascript等でチェックして同期させておかないとずれたりする可能性があったりしますが、cssアニメの場合、（HTMLやcssをすべて読み込んでからアニメ処理しているはずなので）計算された秒数が上手く合っていれば、ずれることはないと思います。なのでサンプルのような秒数カウンターのようなものも作りやすいかと思います。

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

例3へ

ネタコラム

アニメ設定で最初に思ったのは、キーフレームを%で指定する仕様が微妙に不便かもしれない、という点です。
アニメ設定では animation-duration で秒数指定するのだから、キーフレームも秒数指定できればいいのに、などと思ったり…。

繰り返しアニメの場合、0%や100%の点は一瞬なので、例えば、例3のようにバーが伸びるアニメで、最大に伸びきった時は一瞬表示されるだけになり、繰り返しの場合は次のアニメにすぐ移行して、また伸び始めアニメになります。なので例3のように、伸びきった状態をしばらく残したい時は、steps(数値,start)、steps(数値,end)、又はアニメの作り方により step-start、step-end などを使うことで調節する必要があるかと思います。

ちなみに、このページのアニメ設定やキーフレームは、下記のツールで作成しました。
【Animation ソース作成ツール】【keyframes ソース作成ツール】

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を切り替えるなどを想定してるのではないかと思う。

ページトップへ