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

1. Transition

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

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

transition和animation的区别

2. Animation

transition和animation的区别

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

过渡和动画的区别：

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