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

CSS动画和JS动画是网页动画中最常用的两种动画技术，它们各自有自己的特点和优势。CSS动画，一般用来控制页面中的视觉效果，比如说背景颜色、渐变、边框等的变化。它的代码是在CSS文件内部编写，使用起来...

CSS动画和JS动画是网页动画中最常用的两种动画技术，它们各自有自己的特点和优势。

CSS动画，一般用来控制页面中的视觉效果，比如说背景颜色、渐变、边框等的变化。它的代码是在CSS文件内部编写，使用起来简单明了，而且可以方便地控制动画的运行次数、速度、时长等。一个常见的CSS动画代码如下所示：

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

    @keyframes myanimation {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    } 

可以看到，我们只需要在CSS文件中定义好对应的关键帧动画，然后直接在HTML页面中使用“animation”属性来控制动画运行的相关属性即可。

JS动画则更加强大，它可以控制页面元素的位置、大小、透明度、颜色等的变化，并且可以对元素的实时属性进行精确的操作。但是，JS代码相对来说比较复杂，它的实现方式一般有两种：定时器和requestAnimationFrame。一个常见的JS动画代码如下所示：

 var box = document.getElementById("box");
    var angle = 0;

    function rotateBox() {
        box.style.transform = "rotate(" + angle + "deg)";
        angle++;
        setTimeout(rotateBox, 10);
    }

    rotateBox(); 

这段代码实现的功能是，将一个id为“box”的元素旋转360度，并且每10毫秒修改一次它的旋转角度。我们可以看到，在JS中我们需要手动实现动画代码的逻辑和控制，相对来说要比CSS动画的代码复杂很多。

综上所述，CSS动画和JS动画各有其适用范围。如果只是需要实现简单的视觉效果，我们可以使用CSS动画来实现；反之，如果需要更加精确的动画控制和效果，JS动画就是我们的不二选择。