在IE中摇摆不定的css spinner关键帧动画

我曾经见过几个人在IE中出现“摇摆不定”的旋转动画问题，大部分时间都是使用图片而不是动画边框，但这不适用于因为img在IE中加载时间过长，不能及时显示。（网站已经开始重装，没有微调将在所有显示）。因此，我想问，如果任何人有固定在我公司使用的代码（少）另一个想法：在IE中摇摆不定的css spinner关键帧动画

@keyframes spinAround { 
    from { 
    -moz-transform: rotate(0deg); 
    -ms-transform: rotate(0deg); 
    -webkit-transform: rotate(0deg); 
    transform: rotate(0deg); 
    } 
    to { 
    -moz-transform: rotate(359deg); 
    -ms-transform: rotate(359deg); 
    -webkit-transform: rotate(359deg); 
    transform: rotate(359deg); 
    } 
} 

.is-loading { 
    display: inline; 
    position: absolute; 
    top: 50%; 
    box-sizing: inherit; 

    &::before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background: rgba(255, 255, 255, .8); 
    box-sizing: inherit; 
    } 

    &::after { 
    height: 12px; 
    width: 12px; 
    margin-left: -10px; 
    margin-top: -10px; 
    border-width: 4px; 
    border-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, .4) rgba(255, 255, 255, .4) rgba(255, 255, 255, .4); 
    top: 50%; 
    content: ""; 
    display: block; 
    position: absolute; 
    border-style: solid; 
    border-radius: 50%; 
    animation: spinAround 700ms infinite linear; 
    box-sizing: inherit; 

    } 
}

我再简单地切换在div上课。在Chrome或FF中完美工作，但可能是由于IE边界半径问题在IE中跳跃/颠簸。

感谢提前任何想法:)

来源

2017-08-15 Silaithil

i不知道这是否能解决你的问题，但我曾经有过类似IE的问题，帮助我的是在你的关键帧中添加几个步骤来完成旋转。 – rebecca

感谢您的想法，只是尝试过，但不幸的是，添加步骤似乎没有帮助。 – Silaithil

加入这一行的关键帧：

-ms-transform-origin: 100%;

这样的：

from { 
    -moz-transform: rotate(0deg); 
    -ms-transform: rotate(0deg); 
    -webkit-transform: rotate(0deg); 
    transform: rotate(0deg); 
    -ms-transform-origin: 100%; 
    }

如果你是一个旋转一圈可能是你应该使用此行：

-ms-transform-origin: 50% 50%;

来源

2017-12-13 21:55:13

在IE中摇摆不定的css spinner关键帧动画

回答

相关问题