Discussion :

[artenis]

Bonjour.

après plus de 4 heures à assayer de résoudre un problème d'animation avec "animation" et "keyframes" en css3 , celle-ci ne marche toujours pas:
-uniquement sur une animation précise (3 en tout sur le même conteneur parent) : animation de bordures avec "transform" et "transform-origin"
- uniquement avec safari
- uniquement sous wordpress ( j'ai essayé avec un fichier php independant et l'animation marche)

le code source css, html, et jquery est le même (copié/collé)
J'ai vérifié et revérifié le code css (keyframes et animation) !

J'ai rajouté le préfix -webkit- au cas ou , mais vu que l'animation marche sans ce préfix dans toutes les autres versions sans wordpress, je pense que ce n'est pas le problème.
J'ai testé : désactivation de toutes les extensions wordpress et des scripts supplémentaires : owlcaroussel et bootstrap
J'ai vider le cache du navigateur .

voici la page concernée siteweb et le codepen créé
et la version qui marche en dehors de Wordpress

Si vous avez un peu de temps, merci pour votre aide, car là je désespère.

[NoSmoking]

Bonjour,
pourrais tu préciser à quel niveau il y a dysfonctionnement ?

La seule chose que je vois est que ton élément <div class="enter"> possède, via BootStrap, la déclaration suivante box-sizing: border-box qui fait « foirer » l'animation.

[artenis]

Tout d'abord merci pour ton aide NoSmoking

au vu de ta réponse, j'aimerais savoir si les 3 animations et 1 transition présente sur la page mentionnée plus haut fonctionne correctement sur safari chez toi ? Normalement ça fonctionne sur chrome donc prendre pour exemple pour la comparaison, stp.

j'ai effectivement constaté une petite défférence en supprimant le box-sizing de bootstrap.

Par contre après une centaine de test, alors que je rajoutait un "-webkit-border-radius" à la class "enter" et raffaichissait la page, tout les problèmes ont disparu* jusqu'à ce que je supprime cette ligne car elle ne semblait pas changer le problème qui est apparu à nouveau sur safari uniquement : la div "enter" laissait affiché la partie carré au lieu de n'afficher que la partie arrondie (le cercle).

* toutes les animations marchaient sur l'ensemble des navigateurs : tous les préfix webkit ont été rajoutés à animation, keyframes, transform et rotate pour toutes les animations.

j'ai pourtant la dernière version de safari. je n'ai pas encore regardé si des bugs étaient annoncés pour cette dernière version du 19 septembre (environ)

Je penche pour un problème de vidage du cache que pourtant j'effectue chaque rafraichissement.

même problème mais pour tous les smartphones et pour toutes les animations !

il y a t-il un ordre à respecter dans l'utilisation des préfix de navigateur pour le CSS3 ?

[NoSmoking]

... la page mentionnée plus haut fonctionne correctement sur safari chez toi ?
...
... j'ai pourtant la dernière version de safari.

Je n'ai pas de version de Safari, je suis sous windious !

Il me semble me rapeller qu'il fallait mettre overflow: hidden, sous Safari, pour que le border-radius soit correctement appliqué, mais c’était jadis.

il y a t-il un ordre à respecter dans l'utilisation des préfix de navigateur pour le CSS3 ?

Il y a bien longtemps que je ne les utilise plus, sinon toujours les mettre avant la version finalisée.

Exemple d'après ton code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
.enter:hover{
  -o-animation: lightning 1s linear infinite;
  -moz-animation: lightning 1s linear infinite;
  -webkit-animation: lightning 1s linear infinite;
  animation: lightning 1s linear infinite;
}

[Invité]

Bonjour,

Tiens, un outil sympa : https://csswarp.eleqtriq.com/

[artenis]

NoSmoking j'ai testé toutes tes propositions sans résultat.
Pour l'instant mes animations marchent parfaitement sur ordinateur et uniquement sur les navigateurs suivant chrome, mozilla, opera.

jreaux62, merci, mais ça ne m'avance à rien, puisque les css "keyframes" et "animation" ne sont pas évoqués sur cette page .
ce site marche parfaitement sur safari.

Sur le W3C css et html je n'ai aucune erreur concernant l'utilisation des codes d'animation, en dehors du fait qu'ils ne sont pas reconnus puisque prorpiétaire à chaque navigateur.

Auriez-vous une idée de pourquoi mon problème a lieu sur mon site et pas sur Codepen.io ? même code copié/collé !