Question

目前正在处理我的自定义jquery插件，它只需要运行jquery。

我不想要包含额外的第三方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中做到这一点吗？

Answer 1

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

IE9的CSS3动画

1 个答案: