如何让 CSS 动画实现匀速运动而非卡顿式启停-html教程-PHP中文网

如何让 CSS 动画实现匀速运动而非卡顿式启停

本文详解如何通过设置 animation-timing-function（如 linear）消除动画过程中的突兀停顿，使水滴下落、旋转等关键帧动画真正平滑连贯。

本文详解如何通过设置 `animation-timing-function`（如 `linear`）消除动画过程中的突兀停顿，使水滴下落、旋转等关键帧动画真正平滑连贯。

在您提供的 CSS 动画中，.drop 元素沿路径“上升→暂停→转向→再移动→再暂停”的断续行为，并非源于关键帧位置设置错误，而是默认的 animation-timing-function（即 ease）在起止点施加了加减速效果——这导致动画在每个关键帧过渡时自动“缓入缓出”，人为制造了“停顿感”。

要实现匀速、无停顿、机械式流畅运动，必须显式覆盖该默认行为。最直接有效的方式是将 animation 属性中的计时函数设为 linear：

.drop {
  animation: fall 4s infinite linear; /* ✅ 关键：添加 'linear' */
}

⚠️ 注意：linear 必须写在 animation 简写属性中（或单独用 animation-timing-function: linear），仅写 animation: fall 4s infinite; 仍会继承 ease。

此外，原代码中存在几处影响表现的细节问题，建议同步修正：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

单位缺失：top: 100; 应为 top: 100%;（否则无效）；
rotate 写法过时：CSS 中应使用 transform: rotate(...)，而非独立 rotate: 属性（已废弃且不被支持）；
关键帧冗余与逻辑断裂：例如 30% 到 40% 突然旋转 90°，但未定义 transform 的起始状态，易导致跳变。建议统一使用 transform 控制位移+旋转。

优化后的关键帧示例（含 linear + 正确 transform）：

@keyframes fall {
  0% {
    top: 35%;
    left: 46%;
    transform: rotate(45deg) translate(0, 0);
  }
  30% {
    top: 15%;
    left: 70%;
    transform: rotate(100deg) translate(0, -150px); /* 相对位移更可控 */
  }
  60% {
    top: 60%;
    left: 80%;
    transform: rotate(190deg) translate(0, 200px);
  }
  100% {
    top: 100%;
    left: 46%;
    opacity: 0;
    transform: rotate(360deg) translate(0, 300px);
  }
}

✅ 总结：