CSS动画中如何匹配绝对定位left与max-width实现蠕虫分段蠕动

问题核心原因 #

现有代码动画逻辑出错的根源有两点：

• CSS关键帧未对前半段的left属性显式赋值，浏览器会默认给left做从初始值到最终值的全程补间，导致身体伸展阶段蠕虫整体同步右移，无法实现「头先到终点、尾巴再收缩」的时序
• 蠕虫头部（眼睛模块）用了居中对齐，身体拉伸时眼睛会停在身体中间，无法呈现头部往前探的视觉效果

修正后实现代码 #

HTML结构 #

<div class='worm'>
  <div class='worm-eye'>
    <div class='worm-lid' />
    <div class='worm-iris'>
      <div class='worm-iris-container'>
        <div class='worm-iris-glow' />
      </div>
    </div>
  </div>
</div>

CSS样式 #

.worm {
  position: absolute;
  top: 30px;
  left: 50px;
  width: 30vw;
  height: 30vw;
  max-width: 100px;
  max-height: 100px;
  background-color: aquamarine;
  border-radius: 50px;
  display: flex;
  /* 把头部（眼睛）固定在身体右端，替代原有居中对齐 */
  justify-content: flex-end;
  align-items: center;
  /* 给眼睛留右侧内边距，避免贴边 */
  padding-right: 20px;
  animation: move-worm 3s ease-in-out forwards;
}

@keyframes move-worm {
  /* 0%-50% 伸展阶段：固定left值不变，仅拉宽身体让头部抵达B点 */
  0% {
    max-width: 100px;
    left: 50px;
  }
  50% {
    max-width: calc(100px + 20vw);
    left: 50px;
  }
  /* 50%-100% 收缩阶段：同步收窄宽度+右移整体位置，保持头部固定在B点，让尾部完成收拢 */
  100% {
    max-width: 100px;
    left: calc(50px + 20vw);
  }
}

/* 原有眼睛相关样式保持不变即可 */

实现逻辑说明 #

动画严格拆分为两个独立时序阶段：

• 前1.5s（0%-50%进度）：蠕虫尾部固定在起始A点，仅通过增加max-width拉长身体，让右端的头部逐步移动到目标B点，全程整体位置不发生偏移
• 后1.5s（50%-100%进度）：头部固定在B点位置不动，同步减小max-width收缩身体、增加left值让整体元素右移，两个属性的变化量完全匹配，最终尾部收拢到B点，整个蠕虫完成位移。

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