Partage
  • Partager sur Facebook
  • Partager sur Twitter

Mon animation CSS ne marche plus sur firefox

26 mai 2024 à 14:08:44

Bonjour,

Il y a quelque temps j'ai fais une animation en CSS sur mon site qui fonctionnait bien sur les navigateurs principaux.

Voici mon code:

/* -------------------------------------- */
/* ANIMATION ANE */
@keyframes mouvement-uniforme {
    0% 		{ animation-timing-function: linear; transform: translateX(-500px); }
    100% 	{ animation-timing-function: linear; transform: translateX(30px); }
}

@-webkit-keyframes webkit-mouvement-uniforme {
    	0% 		{  -webkit-animation-timing-function: linear; -webkit-transform: translateX(30px ) translateY(-2px ) rotate(-2deg); }
	2% 		{  -webkit-animation-timing-function: linear; -webkit-transform: translateX(60px ) translateY(2px ) rotate(2deg); }

	4% 		{  -webkit-animation-timing-function: linear; -webkit-transform: translateX(90px ) translateY(-2px ) rotate(-2deg); }
	6% 		{  -webkit-animation-timing-function: linear; -webkit-transform: translateX(120px ) translateY(2px ) rotate(2deg); }
	8% 		{  -webkit-animation-timing-function: linear; -webkit-transform: translateX(150px ) translateY(-2px ) rotate(-2deg); }
	10% 		{  -webkit-animation-timing-function: linear; -webkit-transform: translateX(180px ) translateY(2px ) rotate(2deg); }
	12% 		{  -webkit-animation-timing-function: linear; -webkit-transform: translateX(210px ) translateY(0px ) rotate(-1deg); }
	14% 		{  -webkit-animation-timing-function: linear; -webkit-transform: translateX(240px ) translateY(1px ) rotate(1deg); }
	18% 		{  -webkit-animation-timing-function: linear; -webkit-transform: rotate(0deg) translateX(240px) translateY(2px ); }
	24% 		{ -webkit-animation-timing-function: linear; -webkit-transform: rotate(1deg) translateX(240px) translateY(-2px ); }
	28% 		{  -webkit-animation-timing-function: linear; -webkit-transform: rotate(0deg) translateX(240px) translateY(3px ); }
	32% 		{  -webkit-animation-timing-function: linear; -webkit-transform: rotate(0deg) translateX(240px) translateY(-1px ); }
	34% 		{  -webkit-animation-timing-function: linear; -webkit-transform: rotate(1deg) translateX(245px); }
	36% 		{  -webkit-animation-timing-function: linear; -webkit-transform: rotate(0deg) translateX(-2px); }
	38% 		{  -webkit-animation-timing-function: linear; -webkit-transform: translateX(-2px) translateY(2px ); }	
	40% 		{  -webkit-animation-timing-function: linear; -webkit-transform: translateX(-245px); }	
	42% 		{  -webkit-animation-timing-function: linear; -webkit-transform: translateX(-245px) rotate(1deg) translateY(-2px ); }	
	43% 		{  -webkit-animation-timing-function: linear; -webkit-transform: translateX(-245px) rotate(-3deg); }	
	100% 		{  -webkit-animation-timing-function: linear; -webkit-transform: translateX(0px); }
}


@-moz-keyframes moz-mouvement-uniforme {
    	0% 		{  -moz-transform: translateX(30px ) translateY(-2px ) rotate(-2deg); }
	2% 		{  -moz-transform: translateX(60px ) translateY(2px ) rotate(2deg); }
	4% 		{  -moz-transform: translateX(90px ) translateY(-2px ) rotate(-2deg); }
	6% 		{  -moz-transform: translateX(120px ) translateY(2px ) rotate(2deg); }
	8% 		{  -moz-transform: translateX(150px ) translateY(-2px ) rotate(-2deg); }
	10% 		{  -moz-transform: translateX(180px ) translateY(2px ) rotate(2deg); }
	12% 		{  -moz-transform: translateX(210px ) translateY(0px ) rotate(-1deg); }
	14% 		{  -moz-transform: translateX(240px ) translateY(1px ) rotate(1deg); }
	18% 		{  -moz-transform: rotate(0deg) translateX(240px) translateY(2px ); }
	24% 		{  -moz-transform: rotate(1deg) translateX(240px) translateY(-2px ); }
	28% 		{  -moz-transform: rotate(0deg) translateX(240px) translateY(3px ); }
	32% 		{  -moz-transform: rotate(0deg) translateX(240px) translateY(-1px ); }
	34% 		{  -moz-transform: rotate(1deg) translateX(245px); }
	36% 		{  -moz-transform: rotate(0deg) translateX(-2px); }
	38% 		{  -moz-transform: translateX(-2px) translateY(2px ); }	
	40% 		{  -moz-transform: translateX(-245px); }	
	42% 		{  -moz-transform: translateX(-245px) rotate(1deg) translateY(-2px ); }	
	43% 		{  -moz-transform: translateX(-245px) rotate(-3deg); }	
	100% 		{  -moz-transform: translateX(0px); }	
	}





@-ms-keyframes ms-mouvement-uniforme {
    0% 		{ -ms-animation-timing-function: linear; -ms-transform: translateX(-500px); }
    100% 	{ -ms-animation-timing-function: linear; -ms-transform: translateX(0px); }
}
@-o-keyframes o-mouvement-uniforme {
    0% 		{ -o-animation-timing-function: linear; -o-transform: translateX(-500px); }
    100% 	{ -o-animation-timing-function: linear; -o-transform: translateX(0px); }
}
 


.position {
	position: relative; top: -200px; left: -280px; 
	float:left;
	}

.bouge		{ 
	animation: mouvement-uniforme 60s ;
	-webkit-animation: webkit-mouvement-uniforme 20s ;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-duration: 15s;
	-webkit-animation-delay: 0s;
	-webkit-overflow-scrolling: auto!important;

	-moz-animation: moz-mouvement-uniforme 20s;	
	-moz-animation-iteration-count: infinite;
	-moz-animation-fill-mode: forwards;
	-moz-animation-duration: 15s;
	-moz-animation-delay: 0s;
	
	-ms-animation: ms-mouvement-uniforme 10s ;
	
	-o-animation: o-mouvement-uniforme 10s ;
			}
Aujourd'hui ca fonctionne toujours sur Edge, opera mais plus sur firefox..
j'ai essayé de changer les préfixes mais sans réussite.
Voici la page ou un Ane est censé pointer son nez toutes les 10s.. ( tout en bas de la page)
  • Partager sur Facebook
  • Partager sur Twitter
26 mai 2024 à 16:32:57

Bonjour,

Le message qui suit est une réponse automatique activée par un membre de l'équipe de modération. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.

Pour plus d'informations, nous vous invitons à lire les règles générales du forum

Doublon

Les doublons nuisent au bon fonctionnement du forum et sont donc interdits. Si vous vous êtes trompé de section, il suffit de signaler votre sujet au staff pour qu'il le déplace au bon endroit.

Je vous invite à continuer la discussion sur l'autre sujet : https://openclassrooms.com/forum/sujet/mon-animation-css-ne-marche-plus-sur-firefox-87076 

Je ferme ici.

  • Partager sur Facebook
  • Partager sur Twitter