JavaScript | animate()でタイムラインの割合指定
JavaScriptのanimate()メゾッドを使ったアニメーションのタイムラインの割合を指定する方法を紹介しています。
CSSでいうところのパーセント（%）による指定と同等の処理を実装します。
offsetプロパティでアニメーションの割合を指定する
animate()メゾッドを利用したアニメーションでタイムラインの割合を指定した動作サンプルとJavaScriptのサンプルコードです。
サンプルでは、要素を左右に移動させていますが、右側に移動する際はアニメーション時間の多くの割合を利用し、左に移動する部分では割合が少ないので短時間で移動している事が確認できます。
See the Pen JavaScript | Scale animation with animate by yochans (@yochans) on CodePen.
アニメーションさせたい要素としてdivタグで「.item」を設置しています。
<div class="item"></div>アニメーションさせるHTML要素「.item」には以下のCSSを指定しています。
#item {
width: 80px;
height: 80px;
background: #4169e1;
margin: 20px;
}CSSアニメーションのタイムラインはパーセント（%）で実行割合を指定することができますが、JavaScriptのanimate()メゾッドでタイムラインの処理タイミングを割合で調節する場合は「offset」プロパティが利用可能です。
「offset」プロパティは「0」から「1」の範囲で指定します。
CSSアニメーションでいうところの「0%」が「0」、「100%」が「1」となります。
document.querySelector(`.item`).animate(
[
{
offset: 0.0,
transform: 'translate(0, 0)'
},
{
offset: 0.95,
transform: 'translate(300px, 0)'
},
{
offset: 1.0,
transform: 'translate(0, 0)'
}
],
{
duration: 3000,
iterations: Infinity
}
);オプションには「iterations: Infinity」と「direction: 'alternate’」を指定して無限ループするようにしています。
関連：JavaScript | animate()で繰り返しと反転・反復処理の指定方法 | ONE NOTES