IE9的CSS3动画

目前正在使用我自定义的jquery插件，它只需要运行jquery。IE9的CSS3动画

我不想包含额外的第三方jQuery插件。

我有一个CSS3动画运行在我的搜索按钮，当点击时，除了ie9工作正常。 CSS如下：

.loader { 
    display: block; 
    width: 25px; 
    height: 25px; 
    border-radius: 50%; 
    border: 3px solid transparent; 
    border-top-color: #fff; 
    outline:none; 
    -webkit-animation: spin 1s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ 
    animation: spin 1s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ 
    font-size:0; 
    line-height:0 
} 

@-webkit-keyframes spin { 
    0% { 
     -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */ 
     -ms-transform: rotate(0deg); /* IE 9 */ 
     transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */ 
    } 
    100% { 
     -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */ 
     -ms-transform: rotate(360deg); /* IE 9 */ 
     transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */ 
    } 
} 
@keyframes spin { 
    0% { 
     -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */ 
     -ms-transform: rotate(0deg); /* IE 9 */ 
     transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */ 
    } 
    100% { 
     -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */ 
     -ms-transform: rotate(360deg); /* IE 9 */ 
     transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */ 
    } 
}

但它不工作在IE9，是一个纯CSS的解决方案，我可以在IE9中做到这一点工作？

来源

2015-09-24 StevieB

很抱歉，但动画不是在IE9支持。 http://caniuse.com/#feat=css-animation与CSS运气不佳！ –

有没有什么办法可以为CSS中的IE9做一个回退 – StevieB

您可以使用'-ms-'前缀为转换做一个回退，但CSS动画没有任何回退的IE9。 –

IE9或更低版本不支持动画，转换和转换。 IE 10+支持他们，但即使在这种情况下，用户在使用IE时也会遇到很多问题。最好的做法是使用JavaScript。使用JavaScript，您可以避免使用CSS3 animations，即使在IE中也可以更好地运行结果。

对于在浏览器的兼容性寻找animations, transitions and transformations看看这个链接：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#Browser_compatibility

来源

2015-09-25 14:34:35

IE9的CSS3动画

回答

相关问题