【问题标题】:IE10 - CSS animation not workingIE10 - CSS 动画不起作用
【发布时间】:2012-05-08 11:36:44
【问题描述】:

我有一个缩放动画,它在 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;
}

【问题讨论】:

  • 我可以问一下为什么您在 @-ms-keyframes 块内使用非 IE 供应商扩展,而这显然只能由 IE 读取?
  • 我在样式表中复制和粘贴,并没有费心整理。
  • 您还应该始终按照不带前缀的标准结束您的财产清单。

标签: animation css internet-explorer-10


【解决方案1】:

显然我关注的帮助链接不正确。当我将其更改为 -ms-animation: move97 0.2s 时,它可以工作。这是我最初拥有的,但它不起作用,所以我将它更改为上面显示的内容,它确实有效。

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

我被告知它会被纠正。

【讨论】:

    【解决方案2】:

    标准语法是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/

    【讨论】:

    • 媒体查询也可以阻止 IE 看​​到关键帧动画。
    • 我将关键帧提取到它们自己的文件中,而不是将它们放在我的媒体查询包装组件中并修复了它。谢谢格雷厄姆
    猜你喜欢
    • 2014-05-20
    • 1970-01-01
    • 1970-01-01
    • 2015-06-20
    • 2018-02-12
    • 1970-01-01
    • 2013-08-03
    • 2013-07-10
    • 2014-11-10
    相关资源
    最近更新 更多