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/

Answer 2

我相信您的动画没有在 chrome 中触发，因为它选择了 @keyframes hue 而不是 @-webkit-keyframes hue。在这种情况下，它不会到达-webkit-filter: hue-rotate，而是使用来自@keyframes 的filter: hue-rotate。

在@keyframes 下，将filter 更改为-webkit-filter 将在chrome 中工作：jsfiddle

您可以将过滤器合并为一个@keyframes，例如：

@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 */
}