Pourquoi mon animation CSS3 ne fonctionne-t-elle pas dans Safari ?

L'animation CSS3 ne s'affiche pas correctement dans Safari

Les animations CSS3 fonctionnent généralement de manière transparente sur la majorité des navigateurs modernes. Cependant, vous pouvez rencontrer des problèmes lors de leur utilisation dans Safari, entraînant un manque de mouvement ou un rendu incorrect. Un tel cas est illustré ici, où une animation de bras clé ne s'exécute pas correctement dans Safari.

Le problème : l'animation CSS3 ne fonctionne pas dans Safari

Le code fourni consiste de règles d'animation CSS3 conçues pour faire pivoter un élément, mais cette animation n'est pas reconnue par Safari. Tenter de redimensionner l'écran révèle la présence de l'élément dans le DOM, indiquant que ce n'est pas la structure du DOM à l'origine du problème.

Comportement spécifique de Safari avec les images clés

Il a été découvert que Safari nécessite l'utilisation de valeurs en pourcentage complètes lors de la définition des images clés. Dans d'autres navigateurs, il est acceptable d'utiliser des valeurs de pourcentage abrégées, telles que « 5 % » ou « 10 % ». Cependant, Safari nécessite l'utilisation explicite de « 5 % » et « 100 % » dans ce contexte.

La solution : ajouter des valeurs en pourcentage complet

En modifiant l'original Code CSS pour inclure des valeurs de pourcentage complètes, l'animation peut désormais fonctionner correctement dans Safari. Le code mis à jour ci-dessous le démontre :

<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); }

Copier après la connexion

}

Remarque supplémentaire concernant Safari 4

C'est Il est important de noter que les versions antérieures de Safari, telles que Safari 4, ne prennent pas complètement en charge la syntaxe "@keyframes". Par conséquent, il est nécessaire d'utiliser des préfixes spécifiques au fournisseur pour les animations dans Safari 4.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!