DOM

Element.animate() メソッド

[Edge]△。実験的。→

実験的： これは実験的な機能です。本番で使用する前にブラウザー互換性一覧表をチェックしてください。

element に指定のアニメーションを適用し再生します。Animation オブジェクトも返されます。

mdn： このメソッドは、新たに Animation の作成、対象要素への適用、そしてアニメーションの再生を行うショートカット メソッドです。

戻り値として Animation オブジェクトのインスタンスを返します。

構文

options に追加できるプロパティ

id

アニメーションを参照する文字列

composite

実験的 [Edge]⛌。文字列。このアニメーションと、独自の特定の複合操作を指定しない他の個別のアニメーションとの間で値を組み合わせる方法を決定します。デフォルト値は replace です。

add	連続する各反復が最後の反復に基づいて構築される、相加効果を示します。 例として transform を挙げると、translateX(-200px) は自身よりも前に指定されていた rotate(20deg) の値を上書きすることはありませんが、合成結果は translateX(-200px) rotate(20deg) になります。
accumulate	これを指定した場合、add に似ていますがよりスマートな結果が得られ、blur(2) と blur(5) の合成結果は blur(7) になります（blur(2) blur(5) ではありません）。
replace	これを指定した場合、前回の値は新しい値で上書きされます。

iterationComposite

実験的 [Edge]⛌。アニメーション値が反復から反復へと構築される方法を定義します。accumulate または replace を指定できます（上記参照）。デフォルト値は replace です。 pseudoElement

実験的。

戻り値

Animation オブジェクト。

例

mdnより

document.getElementById("tunnel").animate([
  // keyframes
  { transform: 'translate3D(0, 0, 0)' },
  { transform: 'translate3D(0, -300px, 0)' }
], {
  // timing options
  duration: 1000,
  iterations: Infinity
});

簡単なアニメーション

<DIV style="position:relative; border:1px solid black; height:1.2em;">
  <SPAN id=IdTest style="position:absolute">■</SPAN>
</DIV>

IdTest.animate([
  { // from
    opacity:0,
    transform:'translateX(0px)'
  },
  { // to
    opacity:1,
    transform:'translateX(100px)'
  }
], 2000)

テスト