[分享]css动画和js动画的差异有哪些

CSS动画和JS动画都是创建动效的工具，但在实现方式和效果上有所不同。CSS动画是通过CSS属性来实现动画效果，比如改变尺寸、位置、颜色等。它使用CSS中的animation和transtion属性来...

CSS动画和JS动画都是创建动效的工具，但在实现方式和效果上有所不同。

CSS动画是通过CSS属性来实现动画效果，比如改变尺寸、位置、颜色等。它使用CSS中的animation和transtion属性来定义动画。例如：

 .box {
        width: 100px;
        height: 100px;
        background-color: red;
        transition: width 1s;
    }
    
    .box:hover {
        width: 200px;
    } 

以上代码表示鼠标悬浮在box元素上时，元素宽度从100px变成200px的过程会有动画效果，持续时间为1s。

与CSS动画不同，JS动画是通过JavaScript编写的操作来实现动画效果。它可以实现更为复杂的效果，比如路径动画、自定义动画等。可以使用JS中的setInterval和setTimeout来定义动画，或使用第三方库如jQuery的animate方法。例如：

 $(document).ready(function(){
        $(".box").click(function(){
            $(this).animate({left: '300px'}, "slow");
        });
    }); 

以上代码表示当点击box元素时，元素会从当前位置慢慢移动到距左侧300px的位置。

总体来说，CSS动画更适用于简单的效果，而JS动画则更适用于复杂的效果和交互效果。但两者也可以结合使用，比如使用CSS定义基本的动画效果，并在JS中触发和控制动画的运行。