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!!
Được chỉnh sửa bởi Pierre MARTIN vào
Giải pháp được chọn
Hi, i found my mistake, i deleted all lines with prefixes -moz- -o- -ms- and it's fine now!
Đọc câu trả lời này trong ngữ cảnh 👍 0Tất cả các câu trả lời (1)
Giải pháp được chọn
Hi, i found my mistake, i deleted all lines with prefixes -moz- -o- -ms- and it's fine now!
Bạn phải đăng nhập vào tài khoản của bạn để trả lời bài viết. Vui lòng bắt đầu một câu hỏi mới, nếu bạn chưa có tài khoản.