Warum funktioniert meine CSS3-Animation in Safari nicht?

CSS3-Animationen werden in Safari nicht richtig angezeigt

CSS3-Animationen funktionieren normalerweise nahtlos in den meisten modernen Browsern. Bei der Verwendung in Safari können jedoch Probleme auftreten, die zu Bewegungsmangel oder fehlerhafter Darstellung führen. Ein solcher Fall wird hier demonstriert, bei dem eine Tastenarmanimation in Safari nicht ordnungsgemäß ausgeführt wird.

Das Problem: CSS3-Animation funktioniert in Safari nicht

Der bereitgestellte Code besteht aus von CSS3-Animationsregeln, die darauf ausgelegt sind, ein Element zu drehen, aber diese Animation wird von Safari nicht erkannt. Beim Versuch, die Größe des Bildschirms zu ändern, wird das Vorhandensein des Elements im DOM sichtbar, was darauf hinweist, dass es nicht die DOM-Struktur ist, die das Problem verursacht.

Safari's spezifisches Verhalten mit Keyframes

Es wurde festgestellt, dass Safari beim Definieren von Keyframes die Verwendung vollständiger Prozentwerte erfordert. In anderen Browsern ist es akzeptabel, abgekürzte Prozentwerte wie „5 %“ oder „10 %“ zu verwenden. Allerdings erfordert Safari in diesem Zusammenhang die explizite Verwendung von „5 %“ und „100 %“.

Die Lösung: Vollständige Prozentwerte hinzufügen

Durch Modifizierung des Originals Da der CSS-Code vollständige Prozentwerte enthält, kann die Animation jetzt in Safari korrekt funktionieren. Der aktualisierte Code unten zeigt dies:

<br>@-webkit-keyframes keyarm {</p>
<pre class="brush:php;toolbar:false">0% { -webkit-transform: rotate(0deg); }
5% { -webkit-transform: rotate(-14deg); }
10% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(0deg); }

}

Zusätzlicher Hinweis zu Safari 4

Ja Es ist wichtig zu beachten, dass frühere Versionen von Safari, wie z. B. Safari 4, die „@keyframes“-Syntax überhaupt nicht unterstützen. Daher ist es notwendig, herstellerspezifische Präfixe für Animationen in Safari 4 zu verwenden.

Das obige ist der detaillierte Inhalt vonWarum funktioniert meine CSS3-Animation in Safari nicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!