与JavaScript代码进行比较后，为什么CSS动画优胜

1. 编码的高效

在进行前端开发时，少量的代码就能实现更多功能，无疑是一件令人欣喜的事情。比起传统的JavaScript动画，CSS动画则可以在寥寥数行代码内，构建出极其复杂的效果。

举例来说，需要实现一个简单的CSS动画，只需像这样：

.box {
  animation: move 2s infinite;
}

@keyframes move {
  from {
    left: 0;
  }
  to {
    left: 200px;
  }
}

对比之下，使用JavaScript动画，则显得冗长且复杂：

var box = document.querySelector(".box");

var moveLeft = function() {
  box.style.left = "200px";
};

setTimeout(moveLeft, 2000);

可见，相比于JavaScript动画，CSS动画的编码更加简洁、高效，提升了前端开发的效率。

2. 性能的高效

对比CSS动画与JavaScript动画，可以看到，CSS动画是一种硬件加速动画，而JavaScript动画则是软件动画。这意味着，CSS动画能够利用GPU进行渲染，而JavaScript动画只能利用CPU进行渲染。GPU的渲染能力远远强于CPU，因此CSS动画的性能也要优于JavaScript动画。

除此之外，CSS动画与页面同属CSS文件，无需DOM操作或事件绑定，而JavaScript动画则需要不断地操作DOM，这会给浏览器的性能带来负担。因此，CSS动画的性能也要优于JavaScript动画。

3. 动画流畅度

CSS动画的性能更高，就意味着它的动画更加流畅。在实际开发中，这一点非常重要。试想一下，如果一个页面的动画非常卡顿，那么用户的体验会非常糟糕。

4. 兼容性

CSS动画的兼容性要优于JavaScript动画。CSS动画只需要浏览器支持CSS3，而JavaScript动画则需要浏览器支持JavaScript。目前，绝大多数浏览器都支持CSS3，因此CSS动画的兼容性非常好。

5. 应用范围

CSS动画可以应用于更多的元素。比如，CSS动画可以应用于元素的位置、颜色、形状等等。而JavaScript动画只能应用于元素的位置。因此，CSS动画的应用范围要广于JavaScript动画。

结论

综上所述，CSS动画在编码、性能、动画流畅度、兼容性、应用范围等方面都优于JavaScript动画。因此，在开发中，应该尽量使用CSS动画，而尽量避免使用JavaScript动画。