28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

je m'arrache les cheveux depuis des heures pour comprendre pourquoi mon animation css3 (un logo rond qui tourne 270 degrés puis s'arrête) ne fonctionne que partiellement dans firefox.

Je m'explique:

Dans Chrome et Safari, pas de problème: le logo tourne puis ralentit et s'arrête. Si je passe la souris par dessus le logo, il ne bouge pas et reste dans sa position de fin d'animation. Donc aucun problème en vue.

Par contre dans firefox, l'animation se déroule bien excepté que si vous passez la souris sur l'animation (pendant ou après l'animation), celle-ci tressaute, c'est difficile à expliquer... d'après ce que je peux voir, quand on passe la souris sur le logo, l'animation se rejoue mais ultra rapidement! Je ne comprend pas pourquoi. Est-ce que quelqu'un aurait une idée?

Merci mille fois d'avance!

Voici l'adresse web. Le logo dont je parle est donc celui dans le header: lien

Et voici le code css de l'animation:

.logo-text #logo-text, .logo-image #logo-image{
    -webkit-animation: rotating 3s ease; /*Safari and Chrome*/
    -moz-animation:rotating 3s ease; /*Firefox*/
    animation:rotating 3s ease;

    -webkit-animation-delay: 1s; /*Safari and Chrome*/
    -moz-animation-delay: 1s; /*Firefox*/
    animation-delay:1s;

    -webkit-animation-iteration-count: 1; /* Safari and Chrome */
    -moz-animation-iteration-count: 1; /*Firefox*/
    animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards; /* Safari and Chrome */
    -moz-animation-fill-mode: forwards; /*Firefox*/
    animation-fill-mode: forwards;
}

@-webkit-keyframes rotating{
    from{
        -webkit-transform: rotate(0deg);
        -moz-transform:rotate(0deg);
        rotate(0deg);
}

    to{
    -webkit-transform: rotate(270deg); 
    -moz-transform:rotate(270deg); 
    rotate(270deg); 
}
}
   
@-moz-keyframes rotating{
   from{
        -webkit-transform: rotate(0deg);
        -moz-transform:rotate(0deg);
        rotate(0deg);
}
  to{
    -webkit-transform: rotate(270deg); 
    -moz-transform:rotate(270deg); 
    rotate(270deg); 
}
}