Tìm kiếm hỗ trợ

Tránh các lừa đảo về hỗ trợ. Chúng tôi sẽ không bao giờ yêu cầu bạn gọi hoặc nhắn tin đến số điện thoại hoặc chia sẻ thông tin cá nhân. Vui lòng báo cáo hoạt động đáng ngờ bằng cách sử dụng tùy chọn "Báo cáo lạm dụng".

Learn More

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

  • 1 trả lời
  • 0 gặp vấn đề này
  • 1 lượt xem
  • Trả lời mới nhất được viết bởi Pierre MARTIN

more options

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

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 👍 0

Tất cả các câu trả lời (1)

more options

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!

Hữu ích?

Đặt một câu hỏi

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.