JavaScript animate()メゾッドで要素を斜めに移動する方法

2023年4月2日

環境
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 onclick="funA()">確認</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"」を斜めに移動します。

JavaScript

Posted by arkgame

関連記事: