按钮动画

通常 CSS 中实现动画有两种思路，transition和animation。一般而言，简单的、需要主动触发（:hover 、:active或者动态切换类名等）的可以用transition实现，其他的都可以用animation。

总结：

1. 简单动画用transition，其他用 animation
2. transition 可以通过设置时长为 0 来重置
3. animation 可以通过设置 none 来重置
4. 在 :active 时重置动画，点击后会再次运行动画
5. 复杂的动画可以借助现有的动画库，例如 anmate.css
6. 设置动画时长为 0 可以避免首次渲染出现动画

refer: CSS 实现按钮点击动效的套路

代码实例: button动效