CODEWITHSUNDEEP
cssanimation
goshanoob
goshanoob

Reputation: 75

Why animation-iteration does't work with delay?

I'm startin two css-animation one by one and use animation-delay for this. But then I write animation-iteration-count for animnation-1 and animation-2, it works for animation-2 only. And I don't want to use %, from-to only.

#body1 { 
    animation-name: animation-1, animation-2;
    animation-duration: 2s, 4s;
    animation-delay: 0s, 2s;
    animation-iteration-count: 2,2;
}
@keyframes animation-1 {
	from { transform: translate3d(0px, 0px, 0px); }
	to { transform: translate3d(0.5px, -.2px, 0px); }
}
@keyframes animation-2 {
	from { transform: translate3d(0.5px, -.2px, 0px); }
	to { transform: translate3d(0px, -0.5px, 0px); }
}

Upvotes: 0

Views: 73

Answers (1)

Prashant Sani
Prashant Sani

Reputation: 456

The animation-delay property only delays the initial start of the animation, but after it's started it runs continuously.

Now, when the animation starts for the second time, it will not perform animation-1 and only perform animation-2 (Reason being animation-2's animation declaration will be overwritten by animation-1, as both will be starting the same time).

You can get over this problem by using % values. This will not be possible by using just from and to values.

(That is, add a delay between the animation using % values).

A much better version of the code will be as follows): (Removing 2 animations and just letting one animation declaration do the job)

#body1 { 
    animation-name: animation-1;
    animation-duration: 2s;
    animation-delay: 0s;
    animation-iteration-count: 2;
}
@keyframes animation-1 {
  0% { transform: translate3d(0px, 0px, 0px); }
  50% { transform: translate3d(0.5px, -.2px, 0px); }
  50% { transform: translate3d(0.5px, -.2px, 0px); }
  100% { transform: translate3d(0px, -0.5px, 0px); }
}

Upvotes: 1

Related Questions