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

   0% 		{ animation-timing-function: linear; transform: translateX(-500px); }
   100% 	{ animation-timing-function: linear; transform: translateX(30px); }

   0% 		{ -ms-animation-timing-function: linear; -ms-transform: translateX(-500px); }
   100% 	{ -ms-animation-timing-function: linear; -ms-transform: translateX(0px); }

   0% 		{ -o-animation-timing-function: linear; -o-transform: translateX(-500px); }
   100% 	{ -o-animation-timing-function: linear; -o-transform: translateX(0px); }

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!!