CODEWITHSUNDEEP
cssinternet-explorer-11css-animations
yunzen
yunzen

Reputation: 33439

Animation disappears after animation in MSIE11

I have this strange bug in MSIE11, where an animated element disappears right after the end of an animation.

See this example

.cta-43274891247129739-info {
  position: absolute;
  left: 0;
  top: 50px;
  margin: 10px 10px;
  animation: cta-43274891247129739 4s 1s both ease-out;
  text-align: center;
}
@keyframes cta-43274891247129739 {
  0% {
    transform: translateY(1em);
    opacity: 0;
  }
  16.6667%, 83.3333% {
    opacity: 1;
    transform: translateY(0em);
  }
  100% {
    transform: translateY(-40px);
  }
}
<div class="cta-43274891247129739-info">This animation fades in from the bottom, makes a short stop and then translates up to its final halt. But not on MSIE11, where it will dissappear apruptely at the end of the animation </div>

Upvotes: 1

Views: 154

Answers (1)

DSofa
DSofa

Reputation: 564

MSIE11 has issues with animations, particularly with calculations involving different units.

In your particular example, the animation works perfectly, until the very last keyframe. After reaching 100%, it seems like the text has disappeared, but its actually still there, only moved up by 40em.

So the workflow looks something like this:

moves up by 1em => moves up by 0em => moves up by 40px => moves up by 40em

So by the last point, the text is already far above the viewport it seems like it has disappeared.

The solution to this is not to mix px's and em's.

If you change -40px to -4em on the last keyframe, the animation will work okay, maybe won't be the pixel perfect, but at least it will work.

Upvotes: 4

Related Questions