火狐过滤动画 [英] Firefox Filter Animations

问题描述

我有与动画的div上使用Chrome完美的工作。

I've got a div with an animation on working perfectly in Chrome.

下面是code ...

Here is the code...

@-webkit-keyframes adjustHue {
    0% { -webkit-filter: hue-rotate(0deg); }
    25% { -webkit-filter: hue-rotate(45deg); }
    50% { -webkit-filter: hue-rotate(90deg); }
    75% { -webkit-filter: hue-rotate(135deg); }
    100% { -webkit-filter: hue-rotate(180deg); }
}

.blocky {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
text-align: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

-webkit-animation: adjustHue 4s alternate infinite;
-moz-animation: adjustHue 4s alternate infinite;
-o-animation: adjustHue 4s alternate infinite;
animation: adjustHue 4s alternate infinite;
}

所以，我可以复制-webkit-关键帧adjustHue，和复制为-moz-关键帧adjustHue，甚至只是关键帧adjustHue，但我试过换-webkit-滤波器-moz-过滤器，甚至只是没有过滤成功。基本上我需要，我使用的工作跨浏览器的效果。

So I can copy the -webkit-keyframes adjustHue, and replicate for -moz-keyframes adjustHue, and even just keyframes adjustHue, but I've tried swapping -webkit-filter for -moz-filter or even just filter with no success. Basically I need the effect that I am using to work cross browser.

推荐答案

正如你所看到的这里，过滤器尚不支持在Firefox。你可以尝试实现这一目标的另一种方式，但现在，过滤器将不会工作在Firefox没有。

As you can see here, filter is not yet supported in Firefox. You could try achieving this another way, but for now, filter won't work in Firefox yet.

这篇关于火狐过滤动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！