通常 CSS 中实现动画有两种思路，transition和animation。一般而言，简单的、需要主动触发（:hover 、:active或者动态切换类名等）的可以用transition实现，其他的都可以用animation。
总结：
- 简单动画用transition，其他用 animation
- transition 可以通过设置时长为 0 来重置
- animation 可以通过设置 none 来重置
- 在 :active 时重置动画，点击后会再次运行动画
- 复杂的动画可以借助现有的动画库，例如 anmate.css
- 设置动画时长为 0 可以避免首次渲染出现动画
refer: CSS 实现按钮点击动效的套路
代码实例: button动效
