Firefox Filter Animations

问题

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

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;
}

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.

回答1:

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.

来源：https://stackoverflow.com/questions/20937960/firefox-filter-animations