JavaScript animate()メゾッドで要素を斜めに移動する方法
環境
Google Chrome 111.0.5563.147
Windows 10 Home 64bit
書式
animate(keyframes, options)
Element インターフェイスの animate() メソッドは、新しい Animation の生成、
この要素への適用、そしてアニメーションの再生を行うショートカットメソッドです。
animate()メゾッドを利用した要素を斜めに移動させます。
引数について
keyframes キーフレームオブジェクトの配列、またはプロパティが反復処理可能な値の配列
options アニメーションの再生時間を表す整数値(ミリ秒単位)
使用例
<!DOCTYPE html> <html> <body> <style> .cft { width: 50px; height: 60px; background: skyblue; margin: 20px; } </style> <div class="cft trans"></div> <button>確認</button> <script> function funA() { document.querySelector(`.trans`).animate( [ //キーフレームオブジェクトの配列 { transform: 'translate(0, 0)' }, // アニメーションの再生時間を表す整数値 { transform: 'translate(50px, 50px)' } ], { duration: 1000, iterations: Infinity, direction: 'alternate' } ); } </script> </body> </html>
実行結果
「確認」ボタンを押すと、div要素「class ="cft trans"」を斜めに移動します。