% 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;
}