Bug: Animating translate3d() in IE 11 does not work with percentages

[macjohnny]

When animating the translate3d() property with percentage values, the animation does not work in IE 11. It works fine with absolute pixel values, however.

See the example here: https://jsfiddle.net/fu7mrqn0/8/ In the example "translate with percentages, 2 keyframes", the box does not move at all in IE 11, while in chrome, etc. it does.

Moreover, when using more than two keyframes, the animation for all but the first keyframe seems to work.

Tested with version 2.2.5

[macjohnny]

I found a workaround: using translate3d(0%,0,0) instead of translate3d(0,0,0) apparently fixes the problem, see this jsfiddle example: https://jsfiddle.net/5bhbq4ao/ However, I think this should be fixed here, since translating from translate3d(0,0,0) to translate3d(100px,0,0) works, whereas translating from translate3d(0,0,0) to translate3d(100%,0,0) does not.

[drawcall]

You can try using anix, a simpler cartoon library https://github.com/a-jie/AniX

[macjohnny]

@a-jie thanks for your suggestion, however, using Angular we rely on web-animations-js