CSS animation 与 transition 有何区别？

CSS的transition只有两个状态：开始状态 和 结束状态；但animation可能是多个状态，有帧的概念

CSS的transition需要借助别的方式来触发，比如CSS的状态选择器（如:hover）或 借助JavaScript来触发；animation可以自动触发

CSS transition 和 animation 虽然实现动效方式不同，但他们之间有些概念是相同的。比如他们都有“持续时间”、“延迟时间” 和“时间缓动函数”等概念，这些都是用来控制动效的效果。

另外， CSS 的 animation 是离不开 @keyframes 的，换句话说，我们需要先使用 @keyframes 来注册一个动画效果，即帧来描述动画效果。当然，只注册也不见得有效果，还是需要使用 animation-name 属性引用 @keyframes 注册好的动画效果。

除此之外， animation 控制动效上要比 transition 强，因为它具备一些控制动效的属性，比如“播放次数”、“播放方向”、“播放状态”等。

CSS transition 强调的是单一动画属性的过度效果,其过程是简单的，由开始到结束的过程，中间不存在可能的动画转折，只有0到1，比喻：渐隐，渐显;

CSS animation 强调的是多种动画属性的结合，按时间轴线出现周折性动画变换的动画过程，其过程是复杂的，由开始——>结束的过程中，存在可能的动画转折，其过程可能是开始—0—1—2—3>结束的过程。

综合来说：CSS animation可以包括CSS transition 的动画形式。感觉两者之间,transition像是animation的子集。