Composing CSS animations with transforms

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?

Prinzhorn · Accepted Answer · 2012-08-10 17:37:26Z

2

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/

answered Aug 10, 2012 at 17:37

Prinzhorn

22.6k7 gold badges65 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Joe Fiorini Over a year ago

Yeah, the two different timings are definitely the kink. That seems to be the only way I can think of too. Unfortunately, I can't even clean this up by using a psuedo-element since most browsers don't support animations on psudo-elements. Thanks for the answer!

Collectives™ on Stack Overflow

Composing CSS animations with transforms

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related