相同点
- 指定要侦听更改的CSS属性。
- 设置计时（缓和）功能以改变从一个属性值到另一个属性值的速率
- 指定持续时间以控制动画或转换所需的时间
- 以编程方式收听您可以随意执行的动画和特定于转换的事件
- 可视化CSS属性更改。
不同点
- 触发条件不同。animation没有触发条件，transition可以通过类似于
:hover的方式触发
例子查看 - 循环。transition没有指定循环多少次，animation可以循环无限次
animation-iteration-count: infinite; - 定义关键帧。animation可以定义每一帧的变化，transition只能设置ease、ease-in等贝塞尔曲线值
- 预先指定属性。transition必须声明所要转换的属性，animation则不需要
- 与js的交互。尝试在JavaScript中更改animation需要一系列非常复杂的步骤，这些步骤涉及修改@keyframes样式规则本身。