Element.animate()の第2引数やnew KeyframeEffect()の第3引数には、アニメーションの長さの数値(ミリ秒単位の整数)か、以下のタイミングに関するプロパティ値が、オブジェクト形式で指定できます。
CSSプロパティにあるもの
delay:animation-delayと同じ。初期値は0。
direction:animation-directionと同じ。初期値はnormal。
easing:animation-timing-functionに対応。初期値はlinear。(ただしanimation-timing-functionの初期値はease)。
fill:animation-fill-modeと同じ。初期値はnone。
iterations:animation-iteration-countと同じ。初期値はInfinity。
CSSプロパティにないもの
endDelay
アニメーションの終了後、アニメーションを完了するまでの遅延時間(ミリ秒値)。初期値は0。たとえば連続するアニメーションで、次のアニメーションを開始するまでの間(ま)に利用できる。
iterationStart
アニメーションの1周期の中での、アニメーションを開始する位置。0.5を指定すると、1周期の半分進んだ位置から再生が始まる。初期値は0.0。
次のサンプルを見てください。
この例では、下記のタイミングパラメータを使用しています。
const timings = { duration:2000, iterations:3, ease:'ease-in',delay:5000, direction:'alternate', endDelay:3000, fill:'forwards'};
アニメーション全体の長さを図で表すと、次のようになります。
[Play]ボタンのクリックで、アニメーションはスタートし、歩きが始まります(歩きのアニメーションはCSSで作成しています)が、まだ移動しません(図の①)。これは、キーフレームパラメータのdelay:5000が発効し、5秒の待ち時間が発生しているからです。
開始から5秒後、移動アニメーションが始まり、Walkmanは1.5往復します。これはiterations:3によるものです。そして図の③で移動は終わりますが、fill:forwardsが指定してあるので元の位置には戻らず、endDelay:3000によって3秒間、足踏みをした後、アニメーションは終了します。
タイミングパラメータの情報は、AnimationEffectReadOnly.getTiming()メソッド(Animation.effect.getTiming())で得ることができます。