css - Chrome 无法应用过滤器 :hue-rotate() and transform:rotate() at the same time in an animation

Question

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

我创建了一个 JSFiddle here .

如果您尝试删除两个关键帧中的 -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);
  }
}