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? '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 There is a good explanation for this in MDN:
@ - 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;
opacity: 0; to start with and then
animation-fall-mode: forward; .
Comments
Post a Comment