Having problem with animations

Question

Hi everyone, how can i make animation 1 plays after animation 2?

Answer 1

Combine each keyframe frames

for example;

@keyframes animation1{
from{
opacity:0;
}
to{
transform:translateX(300px);
}
}
@keyframes animation2{
from{
transform:scale(0)
}
to{
opacity:0;
}
}

/* combined keyframes */

@keyframes combined{
from{
opacity:0;
}
50%{
transform:translateX(300px) scale(0);
}
to{
opacity:0;
}
}

/* during calling time of the animation add the
duration of animation1 and animation2

for example*/

animation: animation1 2.5s infinite;

animation: animation2 1.3s infinite;

/* combined version animation call */
animation: combined 3.8s infinite;

Answer 2

Tips:

1) you could set many css animation for a same target, and have different parameters for each, among wich the animation-delay property ;)

2) you could dynamically handle css animations with javascript (and animations events) ^^

https://gabrieleromanato.name/css-creating-an-animation-chain

https://stackoverflow.com/questions/33004919/chaining-multiple-css-animations

https://medium.com/@felixblaschke/dynamische-css-animationsketten-d7976bbe00ac

https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API

Answer 3

Hey!

Visit this code
Css animation

-------------code------------
https://code.sololearn.com/WsAAiU3NvnYB/?ref=app