CSS animation 可纯用 CSS 实现动效，核心是 @keyframes 定义关键帧（须含 0% 和 100%）与 animation 简写属性配合，控制名称、时长、缓动、循环等；推荐 ease-in-out、transform/opacit y 优化性能，hover 或加载触发，配合 forwards、paused 等增强控制。
用 CSS animation 实现简单动效，不需要 JavaScript，几行代码就能让元素“活起来”。关键在于掌握 @keyframes 规则 + animation 属性的配合，控制时间、节奏和循环。
写好关键帧（@keyframes）
动画的核心是定义起始、中间、结束时的状态。用 @keyframes 命名一组样式变化，比如让一个按钮左右轻微晃动：
@keyframes wiggle {
0% { transform: rotate(0deg); }
25% { transform: rotate(-3deg); }
50% { transform: rotate(0deg); }
75% { transform: rotate(3deg); }
100% { transform: rotate(0deg); }
}
注意：百分比必须从 0% 开始、100% 结束；可以只写 0% 和 100% 做简单过渡，也可以加中间帧增强表现力。
把动画应用到元素上
用 animation 简写属性一次性设置多个参数，常用组合包括：
立即学习“前端免费学习笔记（深入）”；
-
动画名称：对应
@keyframes的名字，如wiggle -
持续时间：如
0.6s，别设太长（超过 1s 容易显得卡顿） -
运动曲线：推荐
ease-in-out（缓入缓出），更自然；避免用linear（匀速）做交互类动效 -
是否循环：加
infinite可循环，hover 触发时建议只播一次
.btn:hover {
animation: wiggle 0.6s ease-in-out;
}
控制触发时机和行为
初级项目中，多数动效靠用户交互（如 hover、focus）或页面加载后自动播放。小技巧：
- 用
animation-play-state: paused / running暂停/恢复动画（适合 hover 进出控制） - 加
animation-fill-mode: forwards让动画停在最后一帧，避免样式“弹回” - 想首次加载就动？直接写在元素默认样式里，不用等 hover
- 避免全页多个元素同时启动复杂动画，可能影响性能；优先用
transform和opacity（它们走 GPU 加速）
快速调试与优化
浏览器开发者工具里可以直接修改 animation 参数实时预览。建议：
- 先设
animation-iteration-count: 1测试单次效果，再改infinite - 用
animation-delay错开多个元素的启动时间，增加层次感 - 移动端慎用 hover 动效（没鼠标），改用
:active或 JS 添加 class 控制 - 动画过快看不清？延长 duration；太慢显拖沓？压缩到 0.2s–0.8s 区间更友好
