Join the AMA (Ask Me Anything) with the Firefox leadership team to celebrate Firefox 20th anniversary and discuss Firefox’s future on Mozilla Connect. Mark your calendar on Thursday, November 14, 18:00 - 20:00 UTC!

This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Animation CSS on my web site doesn't work on firefox

  • 1 ŋuɖoɖo
  • 0 masɔmasɔ sia le wosi
  • 1 view
  • Nuɖoɖo mlɔetɔ Pierre MARTIN

more options

Hello, I made animations CSS on my web site and everything was working great on all browsers. I just see that it doesn't work anymore only in firefox...

here is my 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 ; }



It was working fine before on firefox. it works on other browsers (opera, Edge,..) Do something changed? it's a long time that i didn't chek it so...

this is the page where a donkey should appear at the bottom of the page:

https://www.campingnoroc.com/en/our-campsite/


Thanks a lot for your help!!

Hello, I made animations CSS on my web site and everything was working great on all browsers. I just see that it doesn't work anymore only in firefox... here is my 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 ; } It was working fine before on firefox. it works on other browsers (opera, Edge,..) Do something changed? it's a long time that i didn't chek it so... this is the page where a donkey should appear at the bottom of the page: https://www.campingnoroc.com/en/our-campsite/ Thanks a lot for your help!!

Pierre MARTIN trɔe

Ŋuɖoɖo si wotia

Hi, i found my mistake, i deleted all lines with prefixes -moz- -o- -ms- and it's fine now!

Xle ŋuɖoɖo sia le goya me 👍 0

All Replies (1)

more options

Ɖɔɖɔɖo si wotia

Hi, i found my mistake, i deleted all lines with prefixes -moz- -o- -ms- and it's fine now!

Helpful?

Bia biabia

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.