HTML怎么做往返动画_HTML CSS alternate往返动画【速查】-html教程-PHP中文网

animation-direction: alternate 单独无效是因为默认 animation-iteration-count 为 1，必须设为 infinite 或 ≥2 才能往返；且 @keyframes 的 0% 和 100% 帧需样式一致或对称，否则循环掉头时会闪动跳变。

html怎么做往返动画_html css alternate往返动画【速查】

用 animation-direction: alternate 就能实现 CSS 往返动画，但必须搭配 animation-iteration-count: infinite，且 @keyframes 的首尾帧不能突变，否则循环时会跳帧或闪动。

为什么 `animation-direction: alternate` 单独写没效果？

很多人写了 animation-direction: alternate 却发现动画还是单向跑——因为默认 animation-iteration-count 是 1，只播一次，根本没“往返”的机会。

必须显式声明：

animation-iteration-count: infinite（无限循环）或至少 ≥2
animation-direction: alternate（或 alternate-reverse）
确保 @keyframes 中 0% 和 100% 状态兼容（比如都用 transform: translateX()，别一个用 left 一个用 transform）

`@keyframes` 首尾不衔接会导致什么？

往返动画在第 2 次循环开始时，浏览器会从 100% 帧反向走到 0% 帧。如果这两帧的样式不一致（比如 0% 是 opacity: 1，100% 是 opacity: 0.5），就会在“掉头”瞬间出现明显闪烁或位置跳变。

安全做法：

让 0% 和 100% 的 transform、opacity、color 等属性值完全相同（或逻辑对称）
例如汽车往返：0% → translateX(0)，50% → translateX(500px) rotateY(180deg)，100% → translateX(0)
避免在 0% 写 margin-left，在 100% 写 transform: translateX() —— 混用布局模型极易断裂

替代方案：不用 `alternate`，手动写往返关键帧

当逻辑复杂（比如中间要停顿、变速、或首尾状态天然不对称）时，硬凑 alternate 反而难维护。直接把往返过程拆进单次动画里更可控：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

@keyframes shuttle {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(300px); }
  100% { transform: translateX(0); }
}
.element {
  animation: shuttle 4s ease-in-out infinite;
}

这种写法的好处：