Bonjour,

J'ai fait un site et les animations semble fonctionner sur n'importe quel appareil et n'importe quel navigateur sauf sur Safari !!!
Je n'arrive pas à comprendre ce qui ne fonctionne pas ... J'ai passé plusieurs heures dessus pourtant.

.anim-ligne {
  -webkit-animation: anim-ligne 1.5s ease-in-out both;
          animation: anim-ligne 1.5s ease-in-out both;
  opacity: 1;
}

@-webkit-keyframes anim-ligne {
  0% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  100% {
    -webkit-transform: scaleX(100%);
            transform: scaleX(100%);
  }
}

@keyframes anim-ligne {
  0% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  100% {
    -webkit-transform: scaleX(100%);
            transform: scaleX(100%);
  }
}

.ligne {
  margin: 3vh 0;
  width: 100%;
  height: 0;
  background-color: #a67c52;
  border: 2px solid #a67c52;
}

<div class="ligne anim-ligne"></div>

Merci d'avance pour votre.

Bonne journée

 

-
Edité par Yozor 4 septembre 2021 à 18:50:37

Bonjour Yozor, 

J'ai récupéré le code que tu as proposé et j'ai installé safari. En effet, la barre n'apparait même pas.

Je suis sous Windows et la version de Safari que j'ai installé est la version 5.1.7.

Je suis aller voir les animations css sur cette page : https://developer.mozilla.org/fr/docs/Web/CSS/animation. Tu verras qu'en bas de la page il y a un tableau de compatibilité.

Les animations css ne sont compatible que depuis la version 9 de Safari, c'est donc normal que cela bug sur mon navigateur Safari, et c'est donc peut-être le même problème pour toi ?

Bonjour,

Merci pour ta réponse.

Ah oui c'est normal que la barre ne s'affiche pas car j'ai oublié de vous transmettre le code JavaScript qui vient ajouter de la classe sur div lors de la visite du site.

La que je ne comprends pas c'est que les autres animations de mon site fonctionnent, il y a seulement cette animation là qui ne fonctionne pas d'ou mon étonnement...

Je pense donc pas que ce soit un soucis de version ou bien de compatibilité ... Je vais regarder ça plus en détail au cas ou.

Bonjour, er pourtant il a bien raison ca doit venir de la compatibilité. Sur firefox certaines choses marchent sur chrome non par exemple. Et encore plus quand ca touche a scale

Il suffisait d'écrire

@keyframes anim-ligne {
  0% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }

au lieu de

@keyframes anim-ligne {
  0% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  100% {
    -webkit-transform: scaleX(100%);
            transform: scaleX(100%);
  }