火狐滤镜动画

Question

我有一个div，里面有一个关于在Chrome中完美工作的动画。

这是代码...

@-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-keyframes adjustHue，并复制 -moz-keyframe adjustHue，甚至只是关键帧 adjustHue，但我尝试将 -webkit-filter 换成 -moz-filter，甚至只是过滤器都没有成功。基本上，我需要用于跨浏览器工作的效果。

Answer 1

正如你在这里看到的，filter在Firefox中尚不受支持。您可以尝试以另一种方式实现此目的，但就目前而言，过滤器在 Firefox 中尚不起作用。