在 CSS3 中有两种方式实现动画, 分别是 animation 和 transition, 他们都有以下功能

• 根据特定 CSS 属性进行动画
• 设定属性变化的 timing function
• 设定动画持续的时间
• 可编程的动画事件(AnimationEnd, AnimationStart, AnimationIeration)

它们之间的主要区别是:

• 触发方式
• 循环
• 中间帧/关键帧

https://www.kirupa.com/html5/css3_animations_vs_transitions.htm