css动画和js动画优先 |css3左右滑动效果代码

对于选择哪种动画方式，视情况而定。一般来说，CSS动画是页面渲染时就能够生效的，而JS动画则需要等待网页加载完毕才能开始实现。因此，在轻量级的动画效果中，CSS动画的优先级更高，可以使页面更加流畅。

然而，在动画效果较为复杂时，JS动画将表现出它的优势。JS动画可以根据用户的操作实时更新动画效果，并可用JavaScript的计算能力实现更加复杂的动画效果，这是CSS动画无法实现的。

// CSS动画实现 
.demo {
animation: slideOut .5s ease 1 forwards;
}
@keyframes slideOut {
0% {
height: 100px;
}
100% {
height: 0;
}
}
// JS动画实现
function startAnimation() {
let element = document.getElementById("demo");
let height = 100;
let timer = setInterval(function() {
if (height<= 0) {
clearInterval(timer);
} else {
height--;
element.style.height = height + "px";
}
},10);
}

因此，在实现动画效果时，应根据实际需要进行选择。对于一些简单的动画效果，CSS动画是一个不错的选择，能够节省API调用的开销，降低页面的负担；而对于较复杂的动画效果，JS动画则表现出它的优势，能够实现更加丰富的动态效果。