如何使用CSS @keyframes复用已有的位移动画？-css教程-PHP中文网

CSS动画复用需用单一名字+CSS变量或animation属性差异化控制，禁用逗号分隔多名称；统一用transform避免样式冲突，原生animate()可接管已定义@keyframes实现运行时控制。

如何使用css @keyframes复用已有的位移动画？

@keyframes

本身不支持“复用”多个名称，但你完全可以用一个动画定义服务多个位移动画场景——关键不是复制代码，而是解耦动画逻辑和控制参数。

为什么不能写 `@keyframes move-left, move-right { ... }`

这是无效语法。浏览器会直接忽略逗号之后的内容，或报解析错误。CSS 规范只允许 @keyframes 后跟**单个合法标识符**，比如 move，而不是列表。

用同一个 `@keyframes` 名称 + CSS 变量控制终点位置

当位移终点不同（比如 translateX(100px)、translateX(-80px)、translateX(200px)），别写三个 @keyframes，改用变量：

定义通用动画：

@keyframes move {
  to { transform: translateX(var(--tx, 0)); }
}

在不同元素上注入不同值：

.item-a { --tx: 100px; animation: move 0.4s ease-out; }
.item-b { --tx: -80px; animation: move 0.4s ease-in; }
.item-c { --tx: 200px; animation: move 0.6s cubic-bezier(0.2, 0.8, 0.4, 1); }

变量作用域天然隔离，互不影响；动画逻辑只写一次，维护成本直降

用 `animation-name` 复用同一组关键帧，靠其他属性差异化行为

如果你的位移动画只是方向、延迟、循环次数不同，更简单：共用一个 @keyframes slide，然后在类里分别设：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

animation-direction: normal vs reverse vs alternate
animation-delay: 0.2s、0.5s、0.8s
animation-duration: 0.3s 和 animation-timing-function: linear 可独立调整
注意：animation-iteration-count: infinite 必须显式写，否则 alternate 不会来回跑

用 `Animatic` 接管已有 `@keyframes` 实现运行时控制

原生 CSS 动画一旦触发就无法暂停/跳转/重设持续时间。若你需要这些能力，又不想重写动画逻辑，可以直接复用已定义的 @keyframes 名称：

假设你写了 @keyframes bounce { ... }，那么：
```
el.animate({ name: 'bounce', duration: 1100 })
```
返回的 Animation 实例支持 pause()、play()、currentTime = 500 等操作
注意：浏览器原生 animate() 已支持 name 参数，无需额外库；但旧版 Safari 需检查兼容性