animation和transition

相同点

• 指定要侦听更改的CSS属性。
• 设置计时（缓和）功能以改变从一个属性值到另一个属性值的速率
• 指定持续时间以控制动画或转换所需的时间
• 以编程方式收听您可以随意执行的动画和特定于转换的事件
• 可视化CSS属性更改。

不同点

• 触发条件不同。animation没有触发条件，transition可以通过类似于:hover的方式触发
  • codepen例子
• 循环。transition没有指定循环多少次，animation可以循环无限次animation-iteration-count: infinite;
• 定义关键帧。animation可以定义每一帧的变化，transition只能设置ease、ease-in等贝塞尔曲线值
• 预先指定属性。transition必须声明所要转换的属性，animation则不需要
• 与js的交互。尝试在JavaScript中更改animation需要一系列非常复杂的步骤，这些步骤涉及修改@keyframes样式规则本身。