1 动画效果

实现动画效果 settimeout transition和animation canvas 以及html5 有一个专门请求动画的api 那就是请求动画帧
requestAnimationFrame 是浏览器专门为动画提供的API reqestAnimationFrame的优势在于充分利用显示器的刷新机制，比较节省系统资源
使用例子如下
var id = requestAnimationFrame(callback);
cancelAnimationFrame(id);
requestAnimationFrame(callback) 会返回一个id，这个id可以用来取消这个动画帧的回调函数

<!DOCTYPE html>
<html>
<body>

<div id="mydiv" style="position:absolute">Some text.</div>

<script>
var adiv = document.getElementById("mydiv");
var leftpos = 0;

function movediv(timestamp){
  
  leftpos += 500;
  const a =window.screen.width;
  leftpos%=a;
  
  adiv.style.left = leftpos + "px";
  requestAnimationFrame(movediv);
}
requestAnimationFrame(movediv);
</script>

</body>
</html>

一个简单的移动画面要是希望条件的话,在里面执行一个

cancelAnimationFrame(id)函数即可,var id = requestAnimationFrame(timestamp);
lg:timestamp是DOMHighResTimeStamp 参数，它表示 requestAnimationFrame() 开始去执行回调函数的时刻,该方法是宏任务,会执行完微任务以后再去执行.setTimeout 也可以实现对应效果
lg:如果不设置position,默认布局就是static ,那么涉及元素的定位和布局方式什么的就不能生效了

2 translate改变位置

改变teanform和opacity不会触发重新布局,只会触发复合

<html>  
<head>  
<style>  
.box {  
width: 100px;  
height: 100px;  
background-color: blue;  
transition: transform 1s ease-in-out;//这个属性是用来设置动画的时间 以及动画的速度 ease-in-out是一个速度曲线 他是一个加速减速曲线  
  
}  
.container {  
position: static;  
}  
</style>  
</head>  
<body>  
  
<div class="container">  
<div class="box"></div>  
</div>  
  
<script>  
// JavaScript 代码以响应交互事件触发动画效果  
document.querySelector('.box').addEventListener('click', function() {  
this.style.transform = 'translateX(200px)';  
});  
</script>  
  
</body>  
</html>

有趣的是在任何布局也能生效,但是不会改变在文档流的位置 lg:写法有很多

  后面的this.classList.add('animate');

.box {  
width: 100px;  
height: 100px;  
background-color: blue;  
animation: moveAnimation 1s ease-in-out forwards;  
}  
.container {  
position: relative;  
background: #EEEEEE;  
}  
  
@keyframes moveAnimation {  
from {  
transform: translateX(0);  
}  
to {  
transform: translateX(200px);  
}  
}

lg:都是可以的

css动画

1 动画效果

2 translate改变位置