CSS3动画不'；在Firefox中工作时不能在Chrome中工作

以下代码在Chrome 47中不起作用，在Firefox 42中可以正常工作：

@-webkit-keyframes hue {
  from { -webkit-filter: hue-rotate(0deg);    }
  to   { -webkit-filter: hue-rotate(-360deg); }
}

@-moz-keyframes hue {
  from { -moz-filter: hue-rotate(0deg);    }
  to   { -moz-filter: hue-rotate(-360deg); }
}

@-ms-keyframes hue {
  from { -ms-filter: hue-rotate(0deg);    }
  to   { -ms-filter: hue-rotate(-360deg); }
}

@-o-keyframes hue {
  from { -o-filter: hue-rotate(0deg);    }
  to   { -o-filter: hue-rotate(-360deg); }
}

@keyframes hue {
  from { filter: hue-rotate(0deg);    }
  to   { filter: hue-rotate(-360deg); }
}

.change-hue-animation {
  -webkit-animation: hue 60s infinite linear;
  -moz-animation: hue 60s infinite linear;
  -ms-animation: hue 60s infinite linear;
  -o-animation: hue 60s infinite linear;
  animation: hue 60s infinite linear;
}

为什么?？我做错了吗

---

提前感谢。

我相信您的动画不会在chrome中触发，因为它选择的是

@关键帧色调

，而不是

@-webkit关键帧色调

。在这种情况下，它不会到达

-webkit filter:hue rotate

，而是从

@关键帧使用
filter:hue rotate

在
@keyframes
下，将
过滤器更改为
-webkit过滤器将在chrome中工作：

您可以将过滤器组合成一个关键帧，例如：

@keyframes hue {
  from {
    -webkit-filter: hue-rotate(0deg);
    filter: hue-rotate(0deg);
  }
  to {
    -webkit-filter: hue-rotate(-360deg);
    filter: hue-rotate(-360deg);
  }
}

.change-hue-animation {
  animation: hue 10s infinite linear;
  -webkit-animation: hue 10s infinite linear; /* Android, Safari/Safari Mobile support */
}

我相信你的动画不会在chrome中触发，因为它选择的是
@关键帧色调
，而不是
@-webkit关键帧色调
。在这种情况下，它不会到达
-webkit filter:hue rotate
，而是从
@关键帧使用
filter:hue rotate

在
@keyframes
下，将
过滤器更改为
-webkit过滤器将在chrome中工作：

您可以将过滤器组合成一个关键帧，例如：

@keyframes hue {
  from {
    -webkit-filter: hue-rotate(0deg);
    filter: hue-rotate(0deg);
  }
  to {
    -webkit-filter: hue-rotate(-360deg);
    filter: hue-rotate(-360deg);
  }
}

.change-hue-animation {
  animation: hue 10s infinite linear;
  -webkit-animation: hue 10s infinite linear; /* Android, Safari/Safari Mobile support */
}

你写的大多数语法甚至都不存在。和-webkit关键帧现在不推荐使用。使用此选项可在所有浏览器上运行：

.change-hue-animation {
  animation: hue 60s infinite linear;
  -webkit-animation: hue 60s infinite linear;
}

@keyframes hue {
  from { filter: hue-rotate(0deg);  -webkit-filter: hue-rotate(0deg);  }
  to   { filter: hue-rotate(-360deg);-webkit-filter: hue-rotate(-360deg); }
}

演示：
您编写的大多数语法甚至不存在。和-webkit关键帧现在不推荐使用。使用此选项可在所有浏览器上运行：

.change-hue-animation {
  animation: hue 60s infinite linear;
  -webkit-animation: hue 60s infinite linear;
}

@keyframes hue {
  from { filter: hue-rotate(0deg);  -webkit-filter: hue-rotate(0deg);  }
  to   { filter: hue-rotate(-360deg);-webkit-filter: hue-rotate(-360deg); }
}

演示：
谢谢您的回答！但它在IE10中不起作用。有没有办法修复它？它不应该工作，因为。AFAIK-ms过滤器不是你想要的，因为啊，好吧。我真的应该使用
-webkit动画
？因为根据caniuse的说法，@meeseek没有很好地使用它。这些属性的全局使用率<1%，因此如果需要，您可以决定不使用它们。最好将前缀属性放在第一位，而非前缀属性放在最后。顺便说一句，回答得很好谢谢你的回答！但它在IE10中不起作用。有没有办法修复它？它不应该工作，因为。AFAIK-ms过滤器不是你想要的，因为啊，好吧。我真的应该使用
-webkit动画
？因为根据caniuse的说法，@meeseek没有很好地使用它。这些属性的全局使用率<1%，因此如果需要，您可以决定不使用它们。最好将前缀属性放在第一位，而非前缀属性放在最后。顺便问一下，答案不错。我应该使用
-webkit animation
以及@Av Avt假设的动画吗？我撤销我的评论（不，你不应该使用
-webkit animation
）。如果您想在android和safari/safari mobile之间实现更高的兼容性，请添加
-webkit-
：PBut@Av Avt声明safari 8需要它。我应该使用
-webkit animation
以及@Av Avt假设的动画吗？我撤销我的评论（不，您不应该使用
-webkit animation
）。如果您想在android和safari/safari mobile之间实现更高的兼容性，请添加
-webkit-
：PBut@Av Avt声明safari 8需要它