2

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.

I have created a JSFiddle here.

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?

Improve this question
2

1 Answer 1

Reset to default
4

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);
  }
}
Improve this answer
2
  • @Jaxo I haven't played around nearly enough with filters and animations so I'm not sure what's going on here that it didn't work with your original code. Glad to help though :)
    – Jasper
    Commented Aug 22, 2013 at 22:44
  • This works perfectly; I just never thought of setting 2 different animations and have them go at the same time. Normally you can accomplish multiple transformations/changes inside a single keyframe block, but I guess not in this case. Either way, it works fantastic now, it was for my Codepen at codepen.io/JaxoDI/pen/gcAbB
    – Scott
    Commented Aug 22, 2013 at 22:49

Not the answer you're looking for? Browse other questions tagged or ask your own question.