4

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

2
  • Animation is jumpy on my Chrome to. Please, post the code here.
    – Pavlo
    Commented Apr 26, 2013 at 11:35
  • @i_like_robots Your pen looks identical in IE10 and Chrome for me. What am I missing?
    – Sampson
    Commented Apr 30, 2013 at 2:55

1 Answer 1

6

% 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;
}
6
  • 1
    Thank you for your time in investigating this, it clearly points to a browser bug. For performance reasons I'd like to keep the animation on the GPU so I guess I'll have to run with CSS pixels for now rather than a relative unit (the problem also occurs with ems). Commented Apr 27, 2013 at 11:31
  • I noticed the same issue, is there any fix to this?
    – Abadaba
    Commented Aug 14, 2013 at 23:14
  • I wonder if there is coming a fix for this? still seems to be an issue in IE11?
    – Malibur
    Commented Apr 2, 2014 at 21:11
  • This bug also occurs if you use IE11 and Win7 (it's fine for Win8 and Win10) and use em or % values for your keyframe animation. Again, using px solves the problem. Commented Aug 6, 2015 at 14:42
  • 1
    Unfortunately, this is not helpful for bugs with rotate which only supports deg and not px values.
    – nikk wong
    Commented Jan 15, 2016 at 20:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.