I ran across a strange animation issue the other day. I created a bounce animation for a small arrow svg to prompt the user to scroll.

  .arrow {
  animation: arrow-bounce 1s ease-in-out infinite alternate;
}

@keyframes arrow-bounce {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(1rem);
  }
}

In most browsers, this gives me this animation.

IE Bounce Fixed

When I popped open IE 10 and 11, however, I saw something much different.

IE11 Bounce

What's going on here?

I began messing with positioning and placement to try and track down the issue. I positioned the arrow toward the top of the parent to see the animation with more clarity. When the arrow "disappears", it's actually animating a couple hundred pixels down and shooting back up to the top.

A friend of mine also created a bounce animation and wasn't having this issue so I investigated his code.

  @keyframes bounce {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(18px);
  }
}

The only real difference between the two animations was the animation units.

Part of my experimentation for a fix involved putting transform: translateY(0); on my icon to see if it had something to do with the start of the animation. Inspecting with IE's dev tools showed the true culprit. IE assumes a px value for unitless values.

In IE, the animation is trying to animate from 0px to 1rem which causes the issue. Changing the 0 to 0rem immediately fixes it.

IE Bounce Fixed

My friend's animation didn't have this issue because he was animating to a pixel value; IE knew how to handle it.

I'm not sure how this translates in other browsers. Chrome and Firefox both leave the unitless value alone. I'll have to do some more research to understand how unitless values translate in other browsers.

If you're having issues with animation, check your unitless elements first. Hopefully that'll save you a little time down the road.


1,342 1 20