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

Answer 1

正如您所看到的here，Firefox中尚不支持filter。您可以尝试以另一种方式实现此目标，但是现在，过滤器在Firefox中无法正常工作。

Firefox过滤器动画

1 个答案: