CODEWITHSUNDEEP
htmlcss
Tanasos
Tanasos

Reputation: 4098

animation-delay css3 property not working properly

I have animated some of the elements on my page that I am currently working on, and I have assigned an animation-delay for it, so it can show a bit later on. In chrome everything is okay, it gets the assigned value of 1s. But in all other browsers it is being delayed for 2.5 to 3 seconds. How can I fix this?

Here is a reduced case fiddle: http://jsfiddle.net/sqnkov/E22ZK/

.delayed {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

P.S>

I have read the MDN post about it being a experimental thingy, but stil - is there a workaround for this issue?

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

Upvotes: 0

Views: 62

Answers (1)

singe3
singe3

Reputation: 2105

The 5seconds comes from .fadeIn which only affects other browsers than Chrome and Safari because you didn't specified a delay for -webkit-

So if what happens on Chrome is what you want, just remove animation-delay: 5s

http://jsfiddle.net/E22ZK/2/

Upvotes: 1

Related Questions