17370845950

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 区间更友好