CSS3 动画在 Chrome 中不起作用，而在 Firefox 中起作用

Question

以下代码在 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;
}

为什么？我做错了什么吗？

提前致谢。

Answer 1

您编写的大部分语法甚至都不存在。现在不推荐使用 -webkit-keyframes。使用它在所有浏览器上运行:

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

演示:http://jsfiddle.net/790gzz83/4/