locked
"Invalid argument" exception in IE10 when adding keyframes rule

    Question

  • The following file gets an invalid argument exception on the line adding a keyframes rule in IE10 running in the Release Preview Windows 8.

    <!DOCTYPE html>
    <html>
    <body>
    <div id="test1">Test A</div><br>
    <div visible="false">Test B</div><br>
    <div>Test C</div><br>
    <script>

    var sheet = document.createStyleSheet();
    sheet.addRule("#test1", "-ms-animation-name testdiv; -ms-animation-duration: 2s; position: absolute; z-index: 2000;");
    sheet.addRule("@-ms-keyframes testdiv", "0% {left: 100px;} 100% {left: 400px;}");
    alert("done");

    </script>
    </body>
    </html>

    Does anyone know the correct Javascript process to do keyframe animations in IE10?


    Tuesday, June 5, 2012 2:44 AM

Answers

  • The release preview has been updated to use standard tags now. So instead of -ms-keyframes, its just @keyframes. You might want to use express blend, which will point you to right CSS property names. (other major changes were to the flexbox etc)

    Tuesday, June 5, 2012 4:01 PM
  • The samples in the MS Visual Studio Express 2012 RC for Windows 8 contained a .js file (scenario5.js) which built a keyframe rule and added it to a stylesheet and then triggered the animation. Applying that the example above resulted in the following version:

    <!DOCTYPE html>
    <html>
    <body>
    <div id="test1">Test A</div><br>
    <div visible="false">Test B</div><br>
    <div>Test C</div><br>
    <script>

    var testelement = document.getElementById("test1");
    var sheet = document.createStyleSheet();
    sheet.addRule("#test1", "animation-name testdiv; animation-duration: 100s; position: absolute; z-index: 2000;");
    sheet.insertRule("@keyframes testdiv {0% {left: 100px;} 100% {left: 400px;})", 0);
    window.setImmediate(function () {
         testelement.style.animationName = 'testdiv';
         });

    </script>
    </body>
    </html>

    This version does run in IE10 and gives me a basis for adjusting my application. Thanks for the tip joemetro.

    Wednesday, June 6, 2012 12:40 AM

All replies

  • The release preview has been updated to use standard tags now. So instead of -ms-keyframes, its just @keyframes. You might want to use express blend, which will point you to right CSS property names. (other major changes were to the flexbox etc)

    Tuesday, June 5, 2012 4:01 PM
  • Leaving -ms- off made no difference at all. But I will look at express blend and see if it can provide some leads. Thank you.
    Tuesday, June 5, 2012 9:51 PM
  • The samples in the MS Visual Studio Express 2012 RC for Windows 8 contained a .js file (scenario5.js) which built a keyframe rule and added it to a stylesheet and then triggered the animation. Applying that the example above resulted in the following version:

    <!DOCTYPE html>
    <html>
    <body>
    <div id="test1">Test A</div><br>
    <div visible="false">Test B</div><br>
    <div>Test C</div><br>
    <script>

    var testelement = document.getElementById("test1");
    var sheet = document.createStyleSheet();
    sheet.addRule("#test1", "animation-name testdiv; animation-duration: 100s; position: absolute; z-index: 2000;");
    sheet.insertRule("@keyframes testdiv {0% {left: 100px;} 100% {left: 400px;})", 0);
    window.setImmediate(function () {
         testelement.style.animationName = 'testdiv';
         });

    </script>
    </body>
    </html>

    This version does run in IE10 and gives me a basis for adjusting my application. Thanks for the tip joemetro.

    Wednesday, June 6, 2012 12:40 AM