Internet Explorer 11 Not allowing calculation within @keyframe

Question

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

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

The problem seems to be with the calculation that is being made within the @keyframe area of the code

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

Please see the JSFiddle for the full example : http://jsfiddle.net/Musicman/g7e34/5/

Ps The problem is nothing to do with me requiring -ms- vendor prefixes

Thanks!

Answer 1

I got it to work in IE11 (on W7 x64) with your jsfiddle by using the answer given at IE 10 + 11: CSS transitions with calc() do not work :

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