[SOLUCIONADO] Animación al finalizar otra animación

[FantasmaFito]

Hola, ¿es posible reproducir una animación con keyframes para un mismo elemento luego de finalizar otra animación? Tengo esto:

Código CSS:

.div_animacion{
    animation:camion 3s ease forwards;
    animation-delay:2s;
}
 
@keyframes camion{
    0%   {left:0px;}
    100%  {left:200px;}
}
 
@keyframes camion2{
    0%   {top:0px;}
    100%  {top:50px;}
}
 

Lo que quiero lograr es que cuando termine la animación "camion" se ejecute la animacion "camion2". La primera animacion llega al ultimo frame y para. La segunda debería repetirse. Intenté con esto pero no me anduvo:

Código CSS:

.div_animacion{
      animation: 
           camion 3s ease forwards, 
           camion2 3s easy infinite;
}
 

¿Alguna idea que me oriente?
Gracias!!

[Alexis88]

¿Y si lo haces todo junto?

Código CSS:

@keyframes camion{
    0%{
        left: 0px;
        top: 0px;
    }
    100%{
        left: 200px;
        top: 50px;
    }
}
 

Y para que el elemento quede fijo en la posición final de la animación, debes de asignarle (al elemento) los valores finales de las propiedades top y left.

Saludos

[FantasmaFito]

No no, porque la primera animación debe ejecutarse y parar. La segunda quiero que se repita siempre y se ejecute una vez finalizada la primera.

[pzin]

Así debería de funcionar:

Código CSS:

animation: camion 3s forwards,
           camion2 3s infinite 3s;
 

El último valor es el retraso de la animación.

Por ejemplo:

[FantasmaFito]

Muchisimas gracias pzin, funcionó. Osea que al segundo siempre hay que indicarle el valor del retraso?

[pzin]

Iniciado por FantasmaFito

Muchisimas gracias pzin, funcionó. Osea que al segundo siempre hay que indicarle el valor del retraso?

Si lo quieres así si. Dependerá de lo que quieras hacer, claro.

[FantasmaFito]

Iniciado por pzin

Si lo quieres así si. Dependerá de lo que quieras hacer, claro.

Ahh ok ok. Muchisimas gracias!