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-关键帧现在被废弃了。使用它在所有浏览器上运行：

.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

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

在@keyframes下，将filter更改为-webkit-filter将在chrome：小提琴中工作。

您可以将过滤器组合成一个@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 */
}