Chrome无法在动画中同时应用过滤器：hue-rotate（）和transform：rotate（） [英] Chrome cannot apply filter:hue-rotate() and transform:rotate() at the same time in an animation

问题描述

我试图应用 -webkit-filter：hue-rotate（）和 -webkit-transform：rotate / code>内部动画关键帧。

I'm trying to apply both -webkit-filter:hue-rotate() and a -webkit-transform:rotate() inside animation keyframes. Unfortunately, not even Chrome Canary renders as it should.

我已经创建了一个JSFiddle

I have created a JSFiddle here.

如果您尝试删除 -webkit-transform 两个关键帧中的线，颜色旋转工作，反之亦然。

If you try removing the -webkit-transform lines in both keyframes, the colour rotation works, and vice-versa. But never both at the same time.

有没有办法使这项工作在目前进行，或者我是运气好吗？

Is there a way to make this work at present time, or am I out of luck?

推荐答案

我在黑暗中创建了一个刺，并创建了两个关键帧动画，然后宣布这两个元素，这是工作在Chrome 28： http://jsfiddle.net/3QGWY/1/

I took a stab in the dark and created two key-frame animations and then declared both for the element, which is working in 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);
  }
}

这篇关于Chrome无法在动画中同时应用过滤器：hue-rotate（）和transform：rotate（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！