Geek Answers Handbook

IE - CSS animation returns at end of animation

I am trying to get a div for animation in the center of the page without moving. It is assumed that the div should scale up and down during rotation (infinitely), all while it sits in one place in the center of the page. This works great in Firefox and Chrome, but in IE11 the div starts at the top of the page and then animates to where it should be. Once the animation is complete, the div will move up and begin.

Here is a JSFiddle that demonstrates this. Please view it in both Chrome and IE to see the contrast.

Here is the code:

@keyframes logosplash { 0% {transform: translateY(50vh) scale(1.25) rotateZ(-45deg);} 50% {transform: translateY(50vh) scale(1) rotateZ(135deg);} 100% {transform: translateY(50vh) scale(1.25) rotateZ(315deg);} } .logoSplash { animation: logosplash 1.5s infinite cubic-bezier(0.46, 0.03, 0.52, 0.96); -webkit-animation: logosplash 1.5s infinite cubic-bezier(0.46, 0.03, 0.52, 0.96); } .logo { position: fixed; width: 13.5vw; height: 13.5vw; left: 50%; margin-top: calc(-6.75vw - 5px); margin-left: calc(-6.75vw - 5px); box-shadow: 0px 0px 10px #000, inset 0px 0px 5px #000; border-radius: 25px; border: 5px solid #fff; transform: translateY(50vh) scale(0.6) rotateZ(-45deg); z-index: 1002; } <div class="logo logoSplash"></div>
+5
source share
1 answer

This is because translateY(50vh) interpreted differently in IE. (I'm not sure about the specifics of this, so feel free to help here.) Remove it from keyframes and add top:50%; in .logo and this should fix the problem.

It seems that translateY(50vh) to transform: translateY(50vh) scale(0.6) rotateZ(-45deg); ignored, but I'm not sure why. In addition, this poor semantics includes property values ​​that remain unchanged throughout the animation: it is completely redundant.

+2
source

More articles:


All Articles