The principle of animation:
It is to use the timer to repeat this operation continuously, and to stop the animation is completed by clearing the timer.
<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>