IE10 - CSS动画不工作 [英] IE10 - CSS animation not working

问题描述

我在IE10工作了一天，然后停了大规模的动画。我没有做任何变化，我不知道会发生什么打破它。

有没有人有什么想法？当我看到在IE开发工具这不是拿起动画的名字，但拿起所有的其他属性。

下面是CSS：

  @  -  MS-关键帧move97
{
    0％{
        变换：规模（1,1）;
        -ms变换：规模（1,1）;
        -moz-变换：规模（1,1）;
        -webkit-变换：规模（1,1）;
        -o变换：规模（1,1）;
    }
    50％{
        变换：规模（0.97,0.97）;
        -ms变换：规模（0.97,0.97）;
        -moz-变换：规模（0.97,0.97）;
        -webkit-变换：规模（0.97,0.97）;
        -o变换：规模（0.97,0.97）;
    }
    100％{
        变换：规模（1,1）;
        -ms变换：规模（1,1）;
        -moz-变换：规模（1,1）;
        -webkit-变换：规模（1,1）;
        -o变换：规模（1,1）;
    }
}。press97
{
    -ms动画名称：move97 0.2秒; / *注意MS有这个不同....唉* /
    动画：move97 0.2秒;
    -moz-动画：move97 0.2秒; / * *火狐/
    -webkit-动画：move97 0.2秒; / * Safari和Chrome * /    动画定时功能：线性的;
    -moz-动画定时功能：线性的;
    -webkit-动画定时功能：线性的;
    -ms动画定时功能：线性的;    动画填充模式：前锋;
    -webkit-动画填充模式：前锋;
    -moz-动画填充模式：前锋;
    -ms动画填充模式：前锋;
}
 

解决方案

显然，我是继帮助链接是不正确的。当我将其更改为-ms动画：move97 0.2秒，它的工作原理。这是我原本并没有工作，所以我把它改成什么如上图所示，这做到了。

帮助链接我也跟着：<一href=\"http://msdn.microsoft.com/library/ie/hh673530.aspx\">http://msdn.microsoft.com/library/ie/hh673530.aspx

有人告诉我它会被纠正。

I have a scale animation that worked in IE10 for about a day and then stopped. I didn't make any changes and am not sure what would happen to break it.

Does anyone have any ideas? When I look in the IE dev tools it's not picking up the animation name, but is picking up 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;
}

解决方案

Apparently the help link I was following isn't correct. 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's shown above, which did.

Help link I followed: http://msdn.microsoft.com/library/ie/hh673530.aspx

I've been told it'll be corrected.

这篇关于IE10 - CSS动画不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！