Css Spinner Keyframe Animation Wobbly in IE

Ich habe mehrere Leute gesehen, die Probleme mit "wobbly" Spinner Animationen in IE und die meiste Zeit, ein Bild anstelle der Animation der Grenze ist vorgeschlagen, aber das wird nicht funktionieren ich da der img dauert zu lange in IE geladen und wird nicht rechtzeitig angezeigt werden. (Homepage schon beginnt Nachladen und kein Spinner wird überhaupt angezeigt werden). Daher wollte ich fragen, ob jemand eine andere Idee hat den Code über die Festsetzung in meinem Unternehmen verwendet (weniger):Css Spinner Keyframe Animation Wobbly in IE

@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; 

    } 
}

ich dann einfach wechseln die Klasse auf einem Div. Funktioniert perfekt in Chrome oder FF, aber wahrscheinlich aufgrund der IE Rand-Radius-Problem ist im IE jumpy/holprig.

Dank im Voraus für alle Ideen :)

Quelle

2017-08-15 Silaithil

i Ich weiß nicht, ob das dein Problem löst, aber ich hatte mal einen ähnlichen Bug mit dem IE, was mir geholfen hat, ein paar Schritte in deinen Keyframes für die Rotation hinzuzufügen. – rebecca

Danke für die Idee, habe es einfach ausprobiert, aber das Hinzufügen von Schritten scheint nicht zu helfen. – Silaithil

Fügen Sie diese Zeile in Ihrer Keyframes:

-ms-transform-origin: 100%;

wie folgt aus:

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

, wenn Sie einen Kreis drehen können Sie verwenden sollten, diese Zeile:

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

Quelle

2017-12-13 21:55:13

Css Spinner Keyframe Animation Wobbly in IE

Antwort

Verwandte Themen