CSS 动画时间函数：easing、cubic-bezier 与更多

Source: Dev.to

本文是关于 CSS + SVG 动画系列的一部分——零 JavaScript 动效栈。

介绍

现代浏览器内置了一个强大且常被低估的动画系统：SVG + CSS 关键帧。无需运行时，也不需要打包工具的魔法——只需标记和样式，浏览器会自动进行硬件加速。

在本文中，我们将探讨 CSS 动画时序函数：easing、cubic‑bezier 与更多，并提供实用的、可直接复制粘贴的示例，适用于任何 React、Vue 或纯 HTML 项目。

为什么选择 SVG + CSS？

SVG 图形存在于 DOM 中。CSS 已经能够使用 @keyframes 动画化 DOM 元素。浏览器的合成线程会以平滑的 60 fps 处理其余工作——而且你向用户交付的 额外字节为零。

核心概念

@keyframes example {
  0%   { opacity: 0; transform: scale(0.8); }
  50%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

.my-shape {
  animation: example 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

关键技巧

1. 使用 CSS 类选择器定位 SVG 元素
   任意 SVG 元素（<svg>、<path>、<circle>、<rect>…）都可以添加 class，并像 <div> 一样进行动画。

2. 优先使用 transform + opacity
   这两个属性会触发 GPU 合成——无需布局重新计算，也不需要重绘。始终优先使用它们。

3. 使用 animation-delay 实现错位

   .item:nth-child(1) { animation-delay: 0s; }
   .item:nth-child(2) { animation-delay: 0.1s; }
   .item:nth-child(3) { animation-delay: 0.2s; }

实用示例

下面是一段完整的、可自行使用的 SVG + CSS 动画代码，你可以把它粘贴到任何地方：

@keyframes orbit {
  from { transform: rotate(0deg) translateX(60px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(60px) rotate(-360deg); }
}
.dot { animation: orbit 2s linear infinite; transform-origin: center; }

使用 CSSVG

如果你想要一个可视化的时间轴编辑器来设计此类动画，而无需手动编写关键帧数学，欢迎尝试 CSSVG ——它会导出干净的 SVG + CSS，你只需直接粘贴到项目中即可。

总结

• SVG 图形是 DOM 元素 → CSS 能原生动画化它们。
• @keyframes + transform/opacity = GPU 合成、零 JS 动画。
• 输出的是可移植的标记——可在 React、Vue、Svelte 或纯 HTML 中使用。

使用 CSSVG 构建 ——可视化的 CSS + SVG 动画编辑器。