I'm making a worm, the worm moves from position A to B. The goal is to have the "body" of the worm stretch up to position B, and the "tail" gets contracted after it reaches B.

Currently, I'm expanding the max-width of the worm and then moving the absolute left position to the exact amount I expanded the worm. So, if the worm expanded 20vw, the absolute left of the whole worm after is contracted becomes 20vw.

I'm having difficulties trying to figure out how to 'hold' position B while contracting the tail of the worm. I'm able to expand and contract the body at the same time, but I want to separate these two movements. Only after the head reaches position B, the tail gets contracted.

Code: 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); }
}