JavaScript | animate()で繰り返しと反転・反復処理
JavaScriptのanimate()メゾッドを使ったアニメーションで繰り返し（Infinite）と反転処理（alternate）を指定する方法を紹介しています。
※当ページではJavaScriptのanimate()メゾッドでの指定方法になります。jQueryのanimate()では同じ方法で指定できませんので注意して下さい。
以下の動作サンプルは、シンプルなフェードインアニメーションに繰り返し（Infinite）と反転処理（alternate）を指定する事で反復処理を実装しています。
See the Pen JavaScript | Fade in with animate by yochans (@yochans) on CodePen.
繰り返し処理（infinite）を指定
animate()メゾッドを利用してアニメーションに繰り返し処理を指定したシンプルなJavaScriptのサンプルコードです。
animate()メゾッドで繰り返し処理を指定するにはオプションに「iterations: Infinity」を追加指定します。
勿論、「Infinite」のかわりに数値を指定する事で繰り返し回数を指定する事も可能です。
document.querySelector(`#item`).animate(
[
{ opacity: 0 },
{ opacity: 1 }
],
{
duration: 3000,
iterations: Infinity
}
);反転処理（alternate）を指定
animate()メゾッドを利用してアニメーションに反転処理を指定したシンプルなJavaScriptのサンプルコードです。
animate()メゾッドで反転処理を指定するにはオプションに「direction: 'alternate’」を追加指定します。
繰り返し処理の「iterations: Infinity」を同時に指定する事で無制限に反復アニメーションを実行します。
document.querySelector(`#item`).animate(
[
{ opacity: 0 },
{ opacity: 1 }
],
{
duration: 3000,
iterations: Infinity,
direction: 'alternate'
}
);