locked
animationFillMode doesn't work for custom animation RRS feed

  • Question

  • In my Windows Store app, I have created a custom animation using @keyframes in the css file. I'm applying this animation to one of my <div> elements through the click event of a button. It's basically a 3-D Transform (rotateY). On the element I have specified animation-fill-mode: forwards (in the css), so that the element should stay in its final state. The animation works, but the element reverts back to the original value. I tried several ways: I set the element.style.animationFillMode="forwards" in the click event just before calling the executeAnimation method. I also tried element.style.msAnimationFillMode="forwards" instead. But nothing works. What am I missing?

    P.S. By the way, if I use the (pure) html5, CSS3 and JavaScript (without any WinJS) outside of the Windows Store app, it works just fine!!!


    DK

    Friday, February 15, 2013 3:08 AM

All replies

  • It looks like either nobody has used custom animation (and hence not encountered this problem before) or nobody has the answer :-(

    DK

    Friday, February 15, 2013 5:21 PM
  • Hi,

    I have a test on my side with follow code. And it is running normal on IE10 and Windows store app.

    <!DOCTYPE html>
    <html lang="en-us">
    <head>
        <title></title>
    <meta http-equiv="X-UA-Compatible" content="IE=10" />
    <style type="text/css">
    div
    {
    width:100px;
    height:100px;
    background:red;
    ;
      animation-delay: 0s;
      animation-duration: 5s;
      animation-iteration-count: 2;
      animation-name: demo;
    
    }
    @keyframes demo {
      from {top:0px;}
    to {top:200px;}
    }
    </style>
    </head>
    <body>
    <div>
    </div>
    </body>
    </html>
    


    Roy
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Wednesday, February 20, 2013 8:11 AM
  • Hi Song Tian,

    The issue not whether the animation runs or not. The issue is that, at the end of the animation, the final value should persist. In your example, at the end of the animation, the "top" value should stay at 200; it should not go back to 0. That's where the animationFillMode property comes into play. In my case, when I invoke the animation using the executeAnimation method, that doesn't happen. And that's the problem.


    DK

    Wednesday, February 20, 2013 6:42 PM
  • Hi DK,

    Just change the style as follow:


    Roy
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.







    • Edited by Song Tian Thursday, February 21, 2013 6:28 AM
    Thursday, February 21, 2013 6:21 AM
  • Hi Song,

    Have tried using the executeAnimation method? Please try it and let me know what happens.


    DK

    Thursday, February 21, 2013 6:10 PM
  • Hi DK,

    Then please post your complete code. Or upload the demo to skydrive.


    Roy
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Friday, February 22, 2013 10:08 AM