动画中最大宽度与绝对左侧匹配

Question

我在做一条蠕虫，蠕虫从A位置移动到B位置，目的是让蠕虫的“身体”延伸到B位置，“尾巴”在到达B后收缩。

目前，我正在扩展蠕虫的最大宽度，然后将绝对左边的位置移动到我所扩展的蠕虫的确切数量。因此，如果蠕虫扩展为20 if，则整个蠕虫收缩后的绝对左侧为20 if。

我很难弄清楚如何“保持”B位，同时收缩蠕虫的尾巴。我能够同时扩张和收缩身体，但我想把这两个动作分开。只有在头部到达B位置后，尾巴才会收缩。

代码：http://jsfiddle.net/gamealchemist/U2tPJ/79/

<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>

.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: center;
  align-items: center;
  animation: move-worm 3s ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes move-worm {
  0% {max-width: 100px; }
  50% { max-width: calc(20vw + 100px); }
  100% {max-width: 100px; left: calc(20vw); }
}

​

​

Answer 1

左右CSS属性是可动画的，所以我们可以使用它们来首先修复左边，然后移动右侧，然后再移动左边，而不是动画的最大宽度。

​

.worm {
  position: absolute;
  top: 30px;
  left: 50px;
  right: calc(50px + 100px);
  height: 100px;
  background-color: aquamarine;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: move-worm 3s ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes move-worm {
  0% {
    left: 50px;
    right: calc(100vw - 50px - 100px);
  }
  50% {
    left: 50px;
    right: calc(100vw - 50px - 100px - 20vw);
  }
  100% {
    left: calc(20vw + 50px);
    right: calc(100vw - 50px - 100px - 20vw)
  }
}

<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>

​