CSS how to start one keyframes animation after other one finished?

Question

How can i start one keyframes animation after other one finished?

#myDiv {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid;
  animation-name: animation1;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

@keyframes animation1 {
  0% {left: 100px}
  100% {left: 200px}
}

@keyframes animation2 {
  0% {top: 100px}
  100% {top: 200px}
}

<div id="myDiv"></div>

I want to animation2 start after animation1 finished. I dont want to divide one animation like 0%,50%,100% or use other animation's animation duration. I want to get animation finished information and use it. I don't want to use delay. Is it possible?

I don't want to use this and that, then how to even animate? It's either % and duration calc with 1 animation or simple delay with 2. — VXp, Sep 04 '18 at 08:52
https://developer.mozilla.org/en-US/docs/Web/Events/animationend — Kaiido, Sep 04 '18 at 08:55
Thanks @Kaiido. It seems like i can use animationend function. — Furkan, Sep 04 '18 at 09:05

score 0 · Answer 1 · answered Sep 04 '18 at 08:41

0

You could use animation-delay. If animation1 takes 3 seconds to complete, you would declare animation2 as follows

@keyframes animation2{
animation-delay : 3s;
0% {
    top: 100px;
}

100% {
    top: 200px;
}
}

answered Sep 04 '18 at 08:41

Aaron Ullal

4,855
8
35
63

Thank but I don't want to use delay because animation duration change based on data from database and there are 5-6 animation based on each other. – Furkan Sep 04 '18 at 08:47
animation-delay is not a property of keyframes. If you add animation-delay to myDiv, it will delay both. – Curtis Sep 23 '19 at 19:22

CSS how to start one keyframes animation after other one finished?

1 Answers1