CSS动画时间比例异常求助：锁的上浮-旋转-下落动画比例失调

你的核心问题是关键帧区间设置错误，导致动画阶段的时间分配完全不符合预期。原写法里的重叠关键帧（比如3%,6%）加上linear缓动，让动画的时间逻辑混乱，无法按比例分配三个阶段。

修正后的代码实现 #

以下是调整后的代码，确保上浮、旋转、下落三个阶段按比例（各占1/3）执行：

CSS 代码

@keyframes lockAnimation {
  /* 初始状态：位于原位 */
  0% {
    transform: translateY(0);
  }
  /* 上浮阶段：0% → 33%，完成上浮至-4px位置 */
  33% {
    transform: translateY(-4px) rotateY(0deg);
  }
  /* 旋转阶段：33% → 66%，保持上浮状态并完成1080度Y轴旋转 */
  66% {
    transform: translateY(-4px) rotateY(1080deg);
  }
  /* 下落阶段：66% → 100%，从上浮位置回到初始位置 */
  100% {
    transform: translateY(0) rotateY(1080deg);
  }
}

.square {
  animation: lockAnimation linear infinite;
  animation-duration: 4s; /* 总时长4秒，每个阶段约1.33秒 */
}

div {
  perspective: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 44px;
}

.cadeado {
  background-image: url(https://www.qas.flyembraer.com/irj/go/km/docs/download_center/Anonymous/loading-sem-cadeado.jpg);
  width: 144px;
  height: 144px;
  display: flex;
  align-items: center; /* 修正原无效的align:center写法 */
}

HTML 代码

<div class="cadeado">
  <div class="square">
    <img src="https://www.qas.flyembraer.com/irj/go/km/docs/download_center/Anonymous/cadeado.jpg" alt="锁" align="center">
  </div>
</div>

关键修正点说明 #

1. 清晰划分关键帧区间：不再使用重叠的百分比区间，改用0%、33%、66%、100%明确划分三个阶段，确保每个阶段的时间占比准确。
2. 保持状态连续性：每个关键帧的transform同时包含当前阶段的所有状态（比如旋转阶段保留translateY(-4px)，下落阶段保留旋转后的角度），避免动画出现跳变。
3. 修正样式错误：把.cadeado中无效的align:center改为标准的align-items:center并添加display:flex，确保内部元素正确居中。

如果需要调整阶段比例，只需修改关键帧的百分比即可。比如想让上浮占20%、旋转占60%、下落占20%，只需将关键帧改为0%、20%、80%、100%。

内容的提问来源于stack exchange，提问作者Leo