css动画需要知道盒子的起始位置和结束位置。而js不需要。
以animation为例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@keyframes move {
from {margin-left: 0;}
to {margin-left: 200px;}
}
div {
width: 50px;
height: 50px;
background-color: pink;
animation: move 2s forwards;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
用js简单实现同样的动画：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 50px;
height: 50px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
var div = document.querySelector('div');
var timer = setInterval(function() {
if(div.offsetLeft <= 200) {
div.style.marginLeft = div.offsetLeft + 5 + 'px';
} else {
clearInterval(timer);
}
}, 50)
</script>
</body>
</html>
css是结果动画，对过程不关心。而js是逐帧动画，可以控制动画的过程。
在知道始末位置且不需要考虑过程的情况下，可以优先选择css动画，因为css动画写法简单。
css动画需要考虑兼容性。在动画属性要加前缀。
比如animation属性，必须ie10以上浏览器版本才能实现。