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:… (மேலும் படிக்க)
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 : TRANSLATION */
@keyframes mouvement-uniforme {
0% { animation-timing-function: linear; transform: translateX(-500px); } 100% { animation-timing-function: linear; transform: translateX(30px); }
}
@-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); }
}
@-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); } }
.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!!