现代 CSS 动画：滚动驱动、弹簧物理与高级动效
动画不再仅仅是“锦上添花”的点缀。它们是提供反馈、引导用户注意力以及创造难忘品牌体验的重要工具。
现代 CSS 引入了革命性的元素动画方法，以前这些效果需要复杂的 JavaScript 滚动监听器或沉重的动画库才能实现。
1. 滚动驱动动画：无需 JS
CSS 动画最令人兴奋的补充莫过于 滚动驱动动画（Scroll-Driven Animation） 规范。它允许你将动画的进度直接链接到容器的滚动位置。
工作原理：
以前，你需要使用 window.onscroll 和 requestAnimationFrame。现在，你只需要 scroll-timeline。
@keyframes progress-bar {
from { width: 0%; }
to { width: 100%; }
}
.progress-indicator {
animation: progress-bar linear;
animation-timeline: scroll(); /* 链接到页面滚动！ */
}
核心应用场景：
- 阅读进度条：显示用户滚动了多少。
- 视差效果：让背景元素以相对于滚动的不同速度移动。
- 滚动显现：使用
view-timeline在元素进入视口时实现淡入效果。
2. 高级关键帧与组合
现代 CSS 允许对动画的组合方式进行更精细的控制。
animation-composition：定义影响同一属性的多个动画应如何混合（例如replace、add或accumulate）。animation-range：精细调整滚动驱动动画在视口内开始和结束的确切时间。
.card {
animation: fade-in linear;
animation-timeline: view();
/* 仅当元素处于屏幕中间 50% 区域时才执行动画 */
animation-range: entry 25% exit 75%;
}
3. 超越线性：三次贝塞尔与弹簧物理
定时函数（Timing functions）定义了动画的“感觉”。虽然 ease-in-out 是标准配置，但高级设计会使用自定义曲线。
三次贝塞尔 (Cubic-Bezier)
三次贝塞尔函数允许你创建“回弹”或“预期”效果。
.button:active {
/* 轻微的反弹效果 */
transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}
CSS 弹簧动画 (实验性)
虽然尚未在所有浏览器中完全原生支持，但弹簧物理（Spring Physics）（质量、刚度、阻尼）的概念正在进入 CSS。这比传统的基于时长的定时能创造出更自然、更有机的运动。
4. 性能：60FPS 原则
流畅动画的关键是避开“主线程”。现代 CSS 动画经过高度优化，但前提是你动画化了正确的属性。
安全动画属性：
transform（缩放、旋转、位移）opacity（透明度）filter（部分浏览器支持）
避免动画化的属性（会导致布局抖动）：
width/heightmargin/paddingtop/left/bottom/right
5. 视图过渡：动画化 DOM 变化
结合视图过渡 API（View Transition API），CSS 现在可以处理两个状态之间元素的“变形”，从而创造出无缝的应用级体验。
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 0.5s;
}
常见问题 FAQ
问：滚动驱动动画支持了吗？
答： 截至 2024 年，它们已在 Chrome 和 Edge 中得到支持。Firefox 和 Safari 正在开发中。你可以现在就将其作为一种“渐进增强”手段来使用——网站在没有它们的情况下仍能运行，但有了它们会更好看。
问：为什么我的动画很卡顿？
答： 确保你只对 transform 和 opacity 进行动画处理。检查是否激活了过多的 backdrop-filter 效果，因为这些效果可能非常消耗性能。
问：我可以使用 @scroll-timeline 吗？
答： 较早的 @scroll-timeline 语法已被更简洁的 animation-timeline: scroll() 和 view() 函数所取代。我们建议使用较新的语法以面向未来。
让您的网站焕发生机
动画是现代用户界面的“灵魂”。通过掌握滚动驱动的时间线和高级定时函数，你可以创造出专业的、引人入胜的体验，让用户流连忘返。
准备好完善您的动效时长了吗？试试我们的 三次贝塞尔曲线生成器（即将推出）或使用我们现有的动画工具。