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:
Ver original@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?