Rare IE10 bug: CSS animation of background-position fails with multiple backgrounds and percentage

Question

This is a very specific bug - however, I would love for someone to show me a workaround! The bug basically consists in IE10 failing to do CSS animation of background-position when these two conditions are met at the same time:

• Having multiple backgrounds
• Setting background-position in percent

Here's a demo, compare Chrome with IE10:

http://codepen.io/dalgard/pen/LiyIK

Answer 1

You need to put a percentage sign after the zeros. It must be so:

@keyframes move {
  0% { background-position: 0%, 0%; }
  100% { background-position: 0%, 100%; }
}