CSS keyframed animation jumpy in IE10

css, css-animations, css-transforms, internet-explorer-10, keyframe

Solution

% transformations

The problem appears to occur when animating the `transform` property with `%` values. If you animate the `tranform` property with `px` values, it runs fine in IE10. Likewise, if you animate a different property like `margin-left` with `%` values, it runs fine.

IE doesn't appear to handle `%` values well when animating the `transform` property. I'd suggest either using a unit other than `%`, or animating a property other than `transform`.

Example using px values

Updated demo (tested fine in IE10, Firefox, Chrome, Safari, and Opera)

@-webkit-keyframes pulse {
  from { -webkit-transform: translateX(0); }
  to   { -webkit-transform: translateX(100px); }
}
@-moz-keyframes pulse {
  from { -moz-transform: translateX(0); }
  to   { -moz-transform: translateX(100px); }
}
@keyframes pulse {
  from { transform: translateX(0); }
  to   { transform: translateX(100px); }
}

.blob {
    width: 320px;
    height: 320px;
    background: red;
    -webkit-animation: pulse 2s linear infinite alternate;
       -moz-animation: pulse 2s linear infinite alternate;
            animation: pulse 2s linear infinite alternate;
}

Example using left margin

Updated demo (tested fine in IE10, Firefox, Chrome, Safari, and Opera)

@-webkit-keyframes pulse {
    from { margin-left: 0%; }
    to   { margin-left: 20%; }
}
@-moz-keyframes pulse {
    from { margin-left: 0%; }
    to   { margin-left: 20%; }
}
@keyframes pulse {
    from { margin-left: 0%; }
    to   { margin-left: 20%; }
}

.blob {
    width: 320px;
    height: 320px;
    background: red;
    -webkit-animation: pulse 2s linear infinite alternate;
       -moz-animation: pulse 2s linear infinite alternate;
            animation: pulse 2s linear infinite alternate;
}

Problem

I've created a simple, looping animation that uses the `translate` function to move elements left and right. This works elegantly in Chrome, Firefox and event starts off well in IE10, however when the animation reverses the elements jump. I have created an example of the issue on CodePen, just open it up in IE10: http://codepen.io/anon/full/cxtza (updated) I have attempted to mitigate the problem by hardcoding the keyframes 0%, 50% and 100% instead of `from/to` and using the `alternate` direction property, I've tried using `translateX` instead of 3D but so far no luck. Update: The bug has been reported https://connect.microsoft.com/IE/feedback/details/785881/animated-transform-with-translate-and-percentage-value-jumps-ie10

Original source