CSS3 IE9 动画

Question

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

我不想包含额外的第 3 方 jquery 插件。

单击搜索按钮时，我有一个 CSS3 动画运行ning，除 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 中不起作用，我可以在 IE9 中做一个纯粹的 css 解决方案吗？

Answer 1

IE9 或更低版本不支持动画、过渡和变换。 IE 10+ 支持它们，但即使在这种情况下，用户在使用 IE 时也会发现很多问题。最好的办法是与 javascript 一起工作。使用 javascript 你可以避免 CSS3 animations 和运行即使在 IE 中你的结果也会更好。

要查看 animations, transitions and transformations 的浏览器兼容性，请查看此 link：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#Browser_compatibility

CSS3 IE9 动画

CSS3 Animation for IE9

css

animation

internet-explorer-9