网站动画为什么分为JS动画和CSS动画

在建设网站中动画效果分为CSS动画和JS动画，但这两种动画到底有什么区别呢。首先它们的实现原理是不一样的，CSS动画是通过关键帧来实现的，着意味着CSS动画更重注于样式和视觉效果的变化。而JS动画是通过JS代码来操作元素属性来实现的，它提供了更加灵活的控制元素的行为和属性。

CSS动画可以通过CSS属性来实现动画效果，不需要编写JS代码，而且使用硬件加速可以更流畅的完成动画效果，有着很好的兼容性，大部分的浏览器都支持CSS动画。当然CSS的功能有限只能完成一些简单的属性动画，不能进行复杂的逻辑控制，同时大部分动画都只能加载一次，虽然可以设置无限次加载，但是不能进行和用户进行交互。

JS动画可以通过编写复杂的JS代码来实现复杂的动画效果，来随时控制元素的移动变化，还可以和用户交互例如拖动点击等效果。但是要编写复杂的JS代码，同时过于复杂的动画可能会造成浏览器的卡顿。

所以像一些例如缩放，位移，旋转等都可以使用CSS来实现：而像路径动画，物理动画等复杂的效果还是得使用JS来实现。不过现在普通的网站动画效果基本上都用不到JS，同时CSS动画会使用硬件加速来优化性能，JS动画会受到JS引擎的影响，有时CSS动画会更加流畅。一些看似复杂的效果也可以通过CSS动画和JS的交互来实现。

一般来说CSS动画能完成的JS也能完成，CSS完成不了的JS也能完成，只是JS书写起来比较麻烦，而且有可能会出现性能上的问题，在开发过程中要根据实际情况来确定动画的复杂程度和使用的动画方法，能用CSS完成的基本不会使用JS来做，哪怕是交互动画一般简单的都会使用JS的交互配合CSS的动画来实现，不会全部使用JS的动画。