transition和animation的区别

2021-06-09 13:06•编程•1160人阅读

这两个近亲一直在用，但是对于细节并没有过多深究，今天还是来比较细品一下吧。

1. Transition

transition允许您平滑地更改属性值，但它们总是需要像hover一样触发。属性更改不会立即生效。在一段时间内，属性会发生变化。例如，如果您将元素的颜色从白色更改为黑色，更改会立即发生。CSS 更改按照可以按照自定义的加速度曲线发生。

在两个状态之间转换的动画称为**隐式转换，**因为开始状态和最终状态之间的状态是由浏览器隐式定义的。

animation允许 HTML 元素的动画，不像过渡只执行点 A 到点 B 操作，但也可以在两者之间进行更多操作。动画包括两个步骤，样式表中定义的 CSS 动画和一组指示动画开始和结束状态的关键帧。

过渡和动画的区别：

Transition	Animation
不能循环（可以这样做，但其不是为此设计的）	可以循环播放
需要触发器才能运行	不需要任何条件
很容易使用JavaScript进行操作	很难在 JavaScript 中工作。操作关键帧并为其分配新值的语法非常复杂。
动画对象从一个点到另一个点。	允许定义从一种状态到另一种具有各种属性和时间范围的关键帧。
使用 JavaScript 操作值。	具有多个关键帧和简单循环为动画提供了灵活性。