Question

我有一个缩放动画，在IE10中工作了大约一天然后停止了。我没有做任何改变，也不确定会破坏它会发生什么。

有没有人有任何想法？当我查看IE开发工具时，它不会获取动画名称，而是拾取所有其他属性。

这是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;
}

Answer 1

标准语法为supported in 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 */
}

小提琴：http://jsfiddle.net/ZfJ4Z/1/

Answer 2

显然我关注的帮助链接不正确。当我将其更改为-ms-animation：move97 0.2s时，它可以正常工作。这是我原来的，它不起作用，所以我把它改成了上面显示的，这样做。

我关注的帮助链接：http://msdn.microsoft.com/library/ie/hh673530.aspx

我被告知它会被纠正。

IE10 - CSS动画无效

2 个答案: