兴趣岛
前端

网页动画实现技巧汇总

2026/4/30

产品经理的一句话让我学会了网页动画

「这个按钮点击能不能有点反馈？那个卡片出现能不能顺滑一点？」产品经理站在我身后，看着刚做好的功能页面提出了需求。

那时的我连CSS transition都写不利索，硬着头皮答应了下来。后来花了一个月系统学习了网页动画的各种实现方式，现在不仅不怕动画需求，甚至会在设计评审阶段主动提出动效建议。

第一步：CSS过渡和动画是最基础的武器

不需要任何第三方库，纯CSS就能实现80%的常见动效：

CSS Transition适合状态变化：

.button {
  transform: scale(1);
  transition: transform 0.2s ease;
}
.button:hover {
  transform: scale(1.05);
}

CSS Animation适合持续或循环的动效：

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.card {
  animation: fadeInUp 0.4s ease forwards;
}

第二步：用requestAnimationFrame实现高性能动画

当需要手动控制动画进度或做游戏级动效时，用 requestAnimationFrame 替代 setTimeout：

  • 帧率稳定在60fps
  • 页面不可见时自动暂停，节省性能
  • 与浏览器的渲染周期同步，减少掉帧

第三步：GSAP库搞定复杂动效

对于复杂的时序动画和滚动触发动画，推荐GSAP库：

  • 支持时间线串联多个动画
  • 滚动驱动动画（ScrollTrigger插件）
  • 兼容所有主流浏览器
  • 性能优秀，移动端也能保持流畅

网页动画实现示意图

第四步：动画设计的黄金法则

技术只是手段，设计才是灵魂。做动画时记住四条原则：

  1. 不要过度：动画应该是「刚好被注意到」而非「强行抢眼」
  2. 保持一致：同类元素使用相同的动效参数
  3. 尊重用户偏好：用 prefers-reduced-motion 媒体查询为运动敏感用户提供关闭选项
  4. 关注性能：优先使用 transform 和 opacity，避免触发布局重排

现在产品经理再来找我要动效，我会反问：「你想要什么感觉的？是轻快的、稳重的还是活泼的？」然后从工具箱里选出最合适的方案。

延伸阅读：

网页动画实现技巧汇总 | 兴趣岛