Question

I want to compose two separate CSS keyframe animations to make an image vibrate and rotate (see http://jsfiddle.net/3zAeZ/). The problem I believe I’m running into is: I’m setting the transform attribute in both keyframe rules, therefore one rule is clobbering the other.

I know this works using top & left instead of translate, but the keyframes rule will be much easier to reuse in the future if I do a transform (for example, in case I ever need to position the image differently).

I’m stumped. Can I do this? Is there a better way I should be doing it?

Answer 1

You can use multiple transforms like

transform: rotate(1337deg) scale(1.5) translate(6em, 300px);

Now I realize that you need two different animation durations as well.
So the best I can come up with is using two elements http://jsfiddle.net/3zAeZ/1/