アニメーションの原理:
この動作を連続して繰り返すのがタイマーを使うことで、タイマーをクリアすることでアニメーションを停止することができます。
<style>
div{
position: absolute;
left: 0;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<html>
<div></div>
</html>
<script>
var div = document.querySelector('div')
var timer = setInterval(function(){
if(div.offsetLeft >= 400){
// 停止动画 本质就是停止定时器
clearInterval(timer)
}
div.style.left = div.offsetLeft + 5 + 'px'
},30)
</script>