Estoy haciendo un gusano, el gusano se mueve de la posición A a la B. El objetivo es que el "cuerpo" del gusano se estire hasta la posición B, y la "cola" se contraiga después de llegar a B.

Actualmente, estoy expandiendo el ancho máximo del gusano y luego moviendo la posición izquierda absoluta a la cantidad exacta que expandí el gusano. Entonces, si el gusano se expandió 20vw, la izquierda absoluta de todo el gusano después de contraerse se convierte en 20vw.

Estoy teniendo dificultades tratando de descubrir cómo 'mantener' la posición B mientras contraigo la cola del gusano. Puedo expandir y contraer el cuerpo al mismo tiempo, pero quiero separar estos dos movimientos. Solo después de que la cabeza alcanza la posición B, la cola se contrae.

Código: 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); } }