如何让 CSS 动画实现匀速流畅运动（避免卡顿式启停）-html教程-PHP中文网

如何让 CSS 动画实现匀速流畅运动（避免卡顿式启停）

本文详解如何通过设置 animation-timing-function 为 linear，消除 CSS 关键帧动画中常见的“启动-停止-再启动”式生硬跳变，使水滴下落旋转等动画真正平滑连贯。

本文详解如何通过设置 `animation-timing-function` 为 `linear`，消除 css 关键帧动画中常见的“启动-停止-再启动”式生硬跳变，使水滴下落旋转等动画真正平滑连贯。

你遇到的问题——水滴动画“上去、停住、转身、再动、又停、再转”——本质上并非关键帧逻辑错误，而是默认缓动函数（ease）导致的非匀速运动。CSS 动画默认使用 ease（先慢→后快→再慢），在相邻关键帧过渡时会产生明显加减速，尤其当位置、旋转、透明度等属性在短时间密集变化时，人眼会感知为“卡顿”或“分段式跳跃”。

解决方法非常简洁：显式指定 animation-timing-function: linear，强制动画以恒定速率执行全程。

✅ 正确写法（推荐）：

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

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

下载

.drop {
  position: absolute;
  top: 35%;
  left: 46%;
  background: #7cc1ff;
  border-radius: 0% 100% 100% 100%;
  transform: rotate(45deg);
  width: 30px;
  height: 30px;

  /* ✅ 关键：添加 linear 时序函数 */
  animation: fall 4s infinite linear;
}

@keyframes fall {
  0% {
    top: 35%;
    left: 46%;
    transform: rotate(45deg);
  }
  10% {
    top: 20%;
    left: 50%;
    transform: rotate(60deg);
  }
  20% {
    top: 15%;
    left: 60%;
    transform: rotate(85deg);
  }
  30% {
    top: 20%;
    left: 70%;
    transform: rotate(100deg);
  }
  40% {
    top: 30%;
    left: 80%;
    transform: rotate(190deg);
  }
  50% {
    top: 60%;
    left: 80%;
    transform: rotate(220deg);
  }
  60% {
    top: 70%;
    left: 80%;
    transform: rotate(250deg);
  }
  70% {
    top: 80%;
    left: 80%;
    transform: rotate(280deg);
  }
  80% {
    top: 100%;
    left: 80%;
    transform: rotate(320deg);
  }
  90% {
    top: 100%;
    left: 80%;
    opacity: 0;
  }
  100% {
    top: 100%;
    left: 46%;
    opacity: 0;
  }
}

⚠️ 注意事项：

rotate 不是独立 CSS 属性：必须写在 transform 中（如 transform: rotate(100deg)），否则无效；你原代码中 rotate: 100deg 是非法声明，已被浏览器忽略。
单位不可省略：top: 100 ❌ 必须写为 top: 100% 或 top: 100px，否则解析失败，导致该帧样式失效。
linear 仅控制速度曲线：它不改变关键帧逻辑，但让每1%进度都严格按比例推进，彻底消除“停顿感”。
进阶优化：若需更自然的物理效果（如轻微弹跳收尾），可选用 cubic-bezier(0.25, 0.46, 0.45, 0.94) 等自定义贝塞尔曲线，但 linear 是解决“启停突兀”最直接可靠的方案。

总结：动画不流畅，90% 源于未显式设定时序函数。加上 linear，一行代码即可让水滴如真实雨滴般匀速坠落、旋转、消隐——专业动画的第一课，从理解 timing-function 开始。