[分享]css与js动画优先级

CSS和JavaScript动画是开发现代网站时不可或缺的组成部分。虽然两者都可以实现动画效果，但它们的优先级和适用场景是不同的。CSS动画是通过动态改变CSS属性来实现的。相比JavaScript，...

CSS和JavaScript动画是开发现代网站时不可或缺的组成部分。虽然两者都可以实现动画效果，但它们的优先级和适用场景是不同的。

CSS动画是通过动态改变CSS属性来实现的。相比JavaScript，它更轻量级、更易于实现和更平滑。 CSS动画的优先级高于JavaScript，这意味着如果一个元素同时应用了CSS和JavaScript动画，CSS动画优先执行。

.box{
    width: 100px;
    height: 100px;
    background-color: red;
    animation: myanimation 2s infinite;
}

@keyframes myanimation{
    0%{
        transform: rotate(0deg);
    }
    
    100%{
        transform: rotate(360deg);
    }
}

var box = document.querySelector('.box');
box.addEventListener('click', function() {
    box.style.transform = 'translateX(200px)';
}); 

在上述代码中，box元素同时应用了CSS动画和JavaScript动画。然而，当该元素被单击时，JavaScript动画将会执行并覆盖CSS动画，因为JavaScript动画是在DOM之后运行的。

因此，在选择使用CSS动画或JavaScript动画时，应先考虑所需动画的复杂度和效率。如果只需要简单的动画效果，如旋转和渐变，那么CSS动画是更合适的选择。如果需要更复杂、交互性强的动画效果，可以选择JavaScript动画。