CSS-Übergang funktioniert nicht in Safari (First-Shot)

Question

Absolute noob hier, also Entschuldigung im Voraus gehen.

Ich habe eine Start/Stop-Verlangsamung basierend auf vorherigen Beispielen gemacht, die ich hier gesehen habe.

JSFiddle

.small-wheel, .big-wheel{ 
    transition: all 2s ease-out; 
} 

Das Problem ist, dass Safari einen sofortigen Stopp ausstellt (auf dem ersten Befehl) ohne den Übergangseffekt nimmt. Nach diesem ersten Mal funktioniert der Übergang jedes Mal gut.

In Firefox und Chrome, kein solches Verhalten.

Ich würde Ihre Hilfe in diesem Fall sehr schätzen.

Answer 1

Hier sind die Hersteller-Präfixe, die benötigt werden, damit es heute browserübergreifend funktioniert.

.small-wheel, .big-wheel{ 
    -webkit-transition: all 2s ease-out; 
    -moz-transition: all 2s ease-out; 
    -o-transition: all 2s ease-out; 
    transition: all 2s ease-out; 
} 

Ich schlage vor, Sie autoprefixer Lesezeichen und es verwenden, wenn Sie Produktionsebene CSS benötigen. Der beste Weg ist es, es auf Ihrem Computer zu installieren, wie es konfigurierbar ist, aber in 95% der Fälle wird das Online-Tool die Aufgabe erledigen. nicht sehr Cross-Browser kompatibel, vor allem auf iOS-Browsern

Answer 2

ich gefunden habe, dass

.stop { 
    -webkit-animation-play-state: paused; 
    -o-animation-play-state: paused; 
    -moz-animation-play-state: paused; 
    animation-play-state: paused; 
} 

mit ist.

stattdessen bin ich jetzt mit:

.stop{ 
    -webkit-animation: none !important; 
    -moz-animation:none !important; 
    animation:none !important; 
}