IE10 No Webkit 不工作答案

【问题标题】：IE10 No Webkit not workingIE10 No Webkit 不工作
【发布时间】：2015-01-11 04:19:16
【问题描述】：

我真的需要一些帮助。在这个网站上http://medicalaid.org 在另一位开发人员离开后，我一直在尝试修复它。我遇到的最后一个问题是我无法在 IE10 中加载一半的 webkit 动画，所有其他浏览器都可以正常工作，并且几乎所有内容 div 都有它们。例如，我尝试过重写 css：

@-webkit-keyframes bounceIn { 
    0% { 
        opacity: 0; 
        -webkit-transform: scale(.3);
        -moz-transform: scale(.3);
        -o-transform: scale(.3);
        -ms-transform: scale(.3); 
    } 

    50% { 
        opacity: 1; 
        -webkit-transform: scale(1.05); 
        -moz-transform: scale(1.05); 
        -o-transform: scale(1.05); 
        -ms-transform: scale(1.05); 
    } 

    70% { 
        -webkit-transform: scale(.9); 
        -moz-transform: scale(.9); 
        -o-transform: scale(.9); 
        -ms-transform: scale(.9); 
    } 

    100% { 
         -webkit-transform: scale(1); 
         -moz-transform: scale(1); 
         -o-transform: scale(1); 
         -ms-transform: scale(1); 
    } 
} 

@keyframes bounceIn { 
    0% { 
        opacity: 0; 
        transform: scale(.3); 
    } 

    50% { 
        opacity: 1; 
        transform: scale(1.05); 
    } 

    70% { 
        transform: scale(.9); 
    } 

    100% { 
        transform: scale(1); 
    } 
} 

.bounceIn.go { 
    -webkit-animation-name: bounceIn; 
    -moz-animation-name: bounceIn; 
    -o-animation-name: bounceIn; 
    -ms-animation-name: bounceIn; 
    animation-name: bounceIn; 
}

而且我什么也做不了，如果有人可以看看并帮助我，那就太好了

【问题讨论】：

（没有反对意见兄弟）代码 sn-p 不在 Chrome 中运行。（编辑）哦，这不是代码 sn-p。如果您想添加一个您正在尝试做的示例，请使用代码 sn-p。否则，只需将其标记为代码。
是我的错谢谢

标签： css html internet-explorer internet-explorer-10 webkit-transform

【解决方案1】：

尝试删除不带前缀的 css 版本：

@keyframes bounceIn { 
    0% { 
        opacity: 0; 
        transform: scale(.3); 
    } 

    50% { 
        opacity: 1; 
        transform: scale(1.05); 
    } 

    70% { 
        transform: scale(.9); 
    } 

    100% { 
        transform: scale(1); 
    } 
}

【讨论】：

这只是在 Chrome 中破坏了网站，在 IE 中没有任何影响

【解决方案2】：

您需要定义的不仅仅是animation-name；您还需要提供持续时间。如果没有这些信息，浏览器就无法知道动画会持续多久。下面我说明整个动画应该持续 2 秒：

.bounceIn.go {
    animation: bounceIn 2s;
}

resulting animation 大概符合您的要求。我为.go 定义了样式，使其变为绿色和圆形。

【讨论】：