css - Chrome无法在动画中同时应用filter:hue-rotate()和transform:rotate()

我正在尝试在动画关键帧中同时应用-webkit-filter:hue-rotate()和-webkit-transform:rotate()。不幸的是，甚至没有Chrome Canary渲染。

我创建了一个JSFiddle here。

如果尝试删除两个关键帧中的-webkit-transform行，则颜色旋转有效，反之亦然。但是永远不要同时使用。

目前有什么方法可以使这项工作奏效，还是我不走运？

最佳答案

我在黑暗中刺了一下，并创建了两个关键帧动画，然后为元素声明了两个动画，它们在Chrome 28中正常工作：http://jsfiddle.net/3QGWY/1/

#subject {
  ...

  -webkit-animation:5s multi_rotate1 linear infinite,5s multi_rotate2 linear infinite;
}

@-webkit-keyframes multi_rotate1 {
  0% {
    -webkit-filter:hue-rotate(0deg);
  }
  100% {
    -webkit-filter:hue-rotate(360deg);
  }
}

@-webkit-keyframes multi_rotate2 {
  0% {

    -webkit-transform:rotate(0deg);
  }
  100% {
    -webkit-transform:rotate(360deg);
  }
}

关于css - Chrome无法在动画中同时应用filter:hue-rotate()和transform:rotate()，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18391928/