সহায়তা খুঁজুন

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 উত্তর
  • 0 এই সমস্যাটি আছে
  • 1 দেখুন
  • শেষ জবাব দ্বারা 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 দ্বারা পরিমিত

সমাধান চয়ন করুন

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

প্রেক্ষাপটে এই উত্তরটি পড়ুন। 👍 0

All Replies (1)

more options

চয়ন করা সমাধান

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

Helpful?

একটি প্রশ্ন জিজ্ঞাসা করুন

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