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>
<div class="code" style="position:relative; padding:0px; margin:0px;"><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); }