Chrome无法在动画中同时应用过滤器：hue-rotate（）和transform：rotate（）

本文介绍了Chrome无法在动画中同时应用过滤器：hue-rotate（）和transform：rotate（）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图应用 -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 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（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！