IE9 的 CSS3 动画答案

【问题标题】：CSS3 Animation for IE9IE9 的 CSS3 动画
【发布时间】：2015-09-24 09:27:57
【问题描述】：

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

我不想包含额外的 3rd 方 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 中不起作用，我可以在 IE9 中做一个纯 css 解决方案来使其正常工作吗？

【问题讨论】：

抱歉，IE9 不支持动画。 caniuse.com/#feat=css-animation CSS 运气不好！
有没有办法在 CSS 中为 IE9 做一个后备
您可以使用-ms- 前缀对变换进行后备，但对于 IE9，CSS 动画没有任何后备。

标签： css animation internet-explorer-9

【解决方案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

【讨论】：