Internet Explorer 11 Do not allow calculations in @keyframe file

Question

I have some code that bounces text back and forth across the width of a DIV.

While this example works in Firefox, Opera, Safari, and Chrome, it will not work in Internet Explorer 11.

The problem is that the calculation is done in the @keyframe area of the code

@keyframes slidein {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(-100% + 250px)); 
    }
}

Please see JSFiddle for a complete example: http://jsfiddle.net/Musicman/g7e34/5/

Ps The problem has nothing to do with me, requiring the prefixes -ms-vendor

Thank!

+3

Justin Feb 24 '14 at 20:01

1 answer

Andrew Morton · Accepted Answer · 2014-02-24T20:27:01+0000

IE11 ( W7 x64) jsfiddle, , IE 10 + 11: CSS calc() :

@keyframes slidein {
    from {
        transform:translateX(0);
    }
    to {
        transform:translateX(-100%) translateX(250px); 
    }
}