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

Question

我正在尝试同时应用-webkit-filter:hue-rotate()和-webkit-transform:rotate()内部动画关键帧。不幸的是，即使是 Chrome Canary 也没有按应有的方式呈现。

我在这里创建了一个 JSFiddle 。

如果您尝试删除-webkit-transform两个关键帧中的线条，颜色旋转会起作用，反之亦然。但绝不会同时发生。

目前有没有办法完成这项工作，还是我不走运？

Answer 1

我在黑暗中刺了一下，创建了两个关键帧动画，然后为在 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);
  }
}