Duda con animation from

[kenproxd]

Hola,

Tengo un div de 300% de ancho y 3 botones que hacen transform: translateX de 0, 33.3% y 66.6%.
Estoy usando keyframes porque requería un efecto como de llegada con rebote. Lo logré hacer de la siguiente manera:

Código CSS:

@keyframes materiales {
    50% { transform: translateX(-31.3%); }
    65% { transform: translateX(-34.3%); }
    100% { transform: translateX(-33.3%); }
}
@keyframes instalacion {
    50% { transform: translateX(-64.6%); }
    65% { transform: translateX(-67.6%); }
    100% { transform: translateX(-66.6%); }
}
@keyframes tipos {
    50% { transform: translateX(-1%); }
    65% { transform: translateX(2%); }
    100% { transform: translateX(0%); }
}
 

Entonces, según el boton que se toque asigno el animation-name al contenedor. Hasta ahi todo bien, el problema es el siguiente:

En los 3 casos la animación empieza desde el 0%, y yo necesito que, por ejemplo, si se esta actualmente en 33.3%, la siguiente animación, ya sea hacia 0% o hacia 66.6% INICIE desde la posicion actual (en este caso 33.3%).

Alguna idea?

[alvaro_trewhela]

Debes inicializar los valores ¿O no?

[kenproxd]

sí, pero justamente esa es la duda: ¿cómo debería inicializar la animación para obtener la posición actual?