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 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>
<!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>
<!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"」を斜めに移動します。