[分享]css动画和js动画的区别

CSS动画和JavaScript动画都是在网页中实现动画效果的方式，但是它们有一些明显的不同点。

 /* CSS动画示例 */
  .box {
    animation: myanimation 2s ease-in-out infinite;
  }

  @keyframes myanimation {
    from {
      transform: scale(1);
    }
    to {
      transform: scale(1.2);
    }
  }

  /* JavaScript动画示例 */
  const box = document.querySelector('.box');
  const animation = () => {
    box.style.transform = 'translateX(200px)';
    setTimeout(() => {
      box.style.transform = 'translateX(0)';
      animation();
    }, 2000);
  }

  animation(); 

首先，CSS动画是由样式表定义和控制的，而JavaScript动画是由编程语言中的代码来控制的。

其次，CSS动画可以在不需要用户交互的情况下自动播放，而JavaScript动画需要触发事件才能开始播放。

再次，CSS动画可以在所有支持CSS的浏览器中运行，而JavaScript动画只能在支持JavaScript的浏览器中运行。

最后，CSS动画更适合实现简单的效果，而JavaScript动画适合实现复杂的交互效果。

总之，在实现动画效果时，我们需要根据项目需求选择适合的工具，合理地使用CSS动画和JavaScript动画。