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