Animation CSS on my web site doesn't work on firefox
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!!
Modified by Pierre MARTIN
Chosen solution
Hi, i found my mistake, i deleted all lines with prefixes -moz- -o- -ms- and it's fine now!
Read this answer in context 👍 0All Replies (1)
Chosen Solution
Hi, i found my mistake, i deleted all lines with prefixes -moz- -o- -ms- and it's fine now!