Partage
  • Partager sur Facebook
  • Partager sur Twitter

Mon animation CSS ne marche plus sur firefox

Sujet résolu
    26 mai 2024 à 14:05:10

    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 à 18:32:46

      Bonjour,

      As-tu changé ton code depuis ta question ?

      Car je viens de tester avec Firefox et l'animation fonctionne.

      • Partager sur Facebook
      • Partager sur Twitter
      Je ne réponds pas aux messages privés.
        26 mai 2024 à 18:53:23

        Bonjour,

        oui, en fait je viens de trouver! j'ai supprimer toutes les lignes avec les prefixes -moz-  -o-  -ms-

        Maintenant ça fonctionne sur Safari, Edge et Firefox. Je crois que j’étais en retard d'une guerre!

        Mon CSS (bien plus court du coup!)

        /* 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); }
        }
        
         
        
        .position{
        	position: relative; top: -200px; left: -280px; 
        	float:left;
        	}
        
        .bouge{ 
        -webkit-animation: webkit-mouvement-uniforme 10s ;
        -webkit-animation-delay: 0s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-duration: 15s;
        -webkit-overflow-scrolling: auto!important;
        
        	}


        Merci quand même pour ton message!

        -
        Edité par PierreMartin63 26 mai 2024 à 19:18:45

        • Partager sur Facebook
        • Partager sur Twitter
          27 mai 2024 à 8:55:53

          Bonjour,

          tu peux même enlever tous les préfixes propriétaires :) Les transformations et les animations sont désormais implémentées sans préfixes dans 98% des navigateurs.

          Par ailleurs, tu as l'animation mouvement-uniforme, et l'animation webkit-mouvement-uniforme, et elles sont très différentes, c'est voulu ?

          • Partager sur Facebook
          • Partager sur Twitter

          Pas d'aide concernant le code par MP, le forum est là pour ça :)

          Mon animation CSS ne marche plus sur firefox

          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
          × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
          • Editeur
          • Markdown