Specifying Your Animation Units

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.

In most browsers, this gives me this animation.

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

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.

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.

Translates transform to px in IE

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

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.


Originally published on CodePen.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.