CSS中的动画和过渡的区别

过渡

CSS过渡允许你平滑地改变属性值，但它们总是需要像hover那样被触发。属性变化不会立即生效。在一段时间内，属性变化会发生。例如，如果你把一个元素的颜色从白色改成黑色，这个变化就会立即发生。CSS的变化是在时间间隔内发生的，遵循一个可以定制的加速曲线。
在两个状态之间过渡的动画被称为隐式过渡，因为开始状态和最终状态之间的状态是由浏览器隐式定义的。

动画

CSS动画允许对HTML元素进行动画处理，与过渡不同的是，过渡只进行A点到B点的操作，但也可以在中间进行更多的操作。动画由两个步骤组成，即在样式表中定义的CSS动画和一组表示动画开始和结束状态的关键帧。

过渡和动画之间的区别 -

过渡	动画
过渡不能循环(可以让它们这样做，但它们不是这样设计的)。	动画在循环中没有问题。
过渡需要一个触发器来运行，如鼠标悬停。	动画刚刚开始。它们不需要任何类型的外部触发源。
转场很容易在JavaScript中操作。	而动画则很难在JavaScript中操作。操作一个关键帧和给它分配一个新值的语法非常复杂。
转场使一个物体从一个点到另一个点产生动画。	动画允许你定义关键帧，通过各种属性和时间框架从一个状态变化到另一个状态。
使用过渡来操纵值	使用JavaScript。

欢迎任何形式的转载，但请务必注明出处，尊重他人劳动成果。
转载请注明：文章转载自 有区别网 [http://www.vsdiffer.com]
本文标题：CSS中的动画和过渡的区别
本文链接：https://www.vsdiffer.com/vs/difference-between-animation-and-transition-in-css.html
免责声明：以上内容仅是站长个人看法、理解、学习笔记、总结和研究收藏。不保证其正确性，因使用而带来的风险与本站无关！如本网站内容冒犯了您的权益，请联系站长，邮箱： ，我们核实并会尽快处理。