internet explorer - CSS animation delay behaves differently in Chrome than in IE/Firefox -


I'm experiencing some problems while using CSS animation delay.

The effect I want:

The red box Transparent starts waits for 1 second, then fade in.

It is in Chrome.

However, behavior is different in IE and Firefox:

box appears , waits 1 second, then disappears And gets fade back.

Which behavior is correct? It seems that if you are going to delay the animation, then it is understandable to wait on the first frame of the animation, not the last frame.

Is there an alternative solution without javascript?

  @ - WebKit-keyframe Fadein {0% {Opacity: 0; } 100% {Opacity: 1; }} @ Keyframe feedin {0% {opacity: 0; } 100% {Opacity: 1; }}. Box {height: 200px; Width: 200px; Background: Red; -webkit-animation: feedin1s1s; Animation: Fadein 1 S 1S; }   
  & lt; Div class = "box" & gt; & Gt; / Div & gt;    
"post-text" itemprop = "text">

'When your animation ends you can back it up in before, after, initial, etc. ... This is not the most intuitive naming convention, but it will give you your code to opacity: 0; to start with and then animation-fall-mode: forward; .

There is a good explanation for this in MDN:

Comments

Popular posts from this blog

java - ImportError: No module named py4j.java_gateway -

python - Receiving "KeyError" after decoding json result from url -

.net - Creating a new Queue Manager and Queue in Websphere MQ (using C#) -