[Solved] "animation-delay" property issue

[sqnkov]

Hello!

I have applied some css3 animations to a element on my page, which appearance I want to delay. The animation-delay property works well enough under chrome, with 1s delay as a given value, but under other browsers the delay of 1s is spanning over the period of 2 to 3 seconds. How can I fix this?

I have read the MDN post about it, and I know it is still experimental stuff. But anyway, is there a workaround for this one?

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay

[Paulie_D]

Until we see it we can’t comment.

Do you have a link or a reduced case Codepen.io example.

[sqnkov]

Here is a reduced case fiddle:

http://jsfiddle.net/sqnkov/E22ZK/

[Paulie_D]

Actually, I think FF is probably doing it right

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    animation-delay: 5s;
    animation-play-state: running
}

I’m not sure why you have multiple class all trying to do parts of the same thing

[sqnkov]

Well it’s not working for me though.

I am using multiple classes because the delay is being applied to a single object only, and the .fadeIn animation is being used by multiple items which are not meant to be delayed.

[Paulie_D]

But you are using this in the class…

.fadeIn {
    animation-delay: 5s;
}

If you disable it…FF seems to co-operate

http://jsfiddle.net/E22ZK/3/

[sqnkov]

Yes, I didnt check the main class. Thanks!

[Author]

Posts