综合技术

Firefox CSS3 animations not working at all

微信扫一扫,分享到朋友圈

Firefox CSS3 animations not working at all
0

So I’m stuck on what I’ve done wrong with my animation code. I have

-webkit-animation: wave 200s linear 0s infinite;
-moz-animation: wave 200s linear 0s infinite;
animation: wave 200s linear 0s infinite;

and

@keyframes wave {
    0% {
    background-position-x: 0%;
    }
    100% {
    background-position-x: 100%;
    }

    }

    @-moz-keyframes wave {
    0% {
    background-position-x: 0%;
    }
    100% {
    background-position-x: 100%;
    }

    }

    @-webkit-keyframes wave {
    0% {
        top: 20px;
    background-position-x: 0%;
 }
100% {
    top: 60px;
   background-position-x: 100%;
}

}

Now Chrome and Safari work just fine. As soon as I fire up firefox, this animation doesn’t play at all. Is there a possibility I have just overlooked something here? I’ve been trying different methods all day and nothing seems to work. Any help is really appreciated! Thank you!

EDIT: Heres the jsfiddle
. As you can see, it works on chrome but not on FF.

Problem courtesy of: David

阅读原文...


CSS3 Recipes

买新iPhoneXS的用户们,你们会为这个功能再花钱么?

上一篇

Sorting algorithms made in ruby

下一篇

您也可能喜欢

评论已经被关闭。

插入图片
Firefox CSS3 animations not working at all

长按储存图像,分享给朋友