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:… (funda kabanzi)
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!!
