Geek Answers Handbook

IE10 - CSS animation not working

I have a scale animation that worked in IE10 for about one day and then stopped. I did not make any changes and am not sure what to break it.

Does anyone have any ideas? When I look in IE dev tools, it does not pick up the name of the animation, but collects all the other properties.

Here's the CSS:

@-ms-keyframes move97
{
    0% {
        transform:scale(1,1);
        -ms-transform:scale(1,1); 
        -moz-transform:scale(1,1); 
        -webkit-transform:scale(1,1); 
        -o-transform:scale(1,1); 
    }
    50% {
        transform:scale(0.97,0.97);
        -ms-transform:scale(0.97,0.97); 
        -moz-transform:scale(0.97,0.97); 
        -webkit-transform:scale(0.97,0.97); 
        -o-transform:scale(0.97,0.97); 
    }
    100% {
        transform:scale(1,1);
        -ms-transform:scale(1,1); 
        -moz-transform:scale(1,1); 
        -webkit-transform:scale(1,1); 
        -o-transform:scale(1,1); 
    }
}

.press97
{
    -ms-animation-name: move97 0.2s; /* note MS has this different.... ugh */
    animation: move97 0.2s;
    -moz-animation: move97 0.2s; /* Firefox */
    -webkit-animation: move97 0.2s; /* Safari and Chrome */ 

    animation-timing-function: linear;
    -moz-animation-timing-function: linear; 
    -webkit-animation-timing-function: linear;
    -ms-animation-timing-function: linear;   

    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
}
+5
source share
2 answers

Apparently, the reference link I followed is incorrect. When I change it to -ms-animation: move97 0.2s, it works. This is what I had originally, and it did NOT work, so I changed it to what was shown above.

Reference link: " http://msdn.microsoft.com/library/ie/hh673530.aspx

I was told that it will be fixed.

+5

Internet Explorer 10 -ms animation-name . , IE10, , animation:

@keyframes myanimation {
    0%   { color: black; }
    80%  { color: gold; transform: translate(20px,20px); }
    100% { color: black; translate(0,0); }
}

#anim {
    display: inline-block;
    animation: myanimation 5s 5; /* use myanimation 5s duration, 5 times */
}

Fiddle: http://jsfiddle.net/ZfJ4Z/1/

+15

More articles:


All Articles