CSS animation with multiple transforms but without nested divs

Question

This is the effect that I want, but is there a way to do it without nested divs? I have tried to combine the transforms, but either I'm missing something simple, or I just need to us JavaScript or jQuery to add and remove classes?

Here is my attempt at combining

.spin{
-webkit-animation: scaleup .5s 1 forwards,
                   rotate .6s linear .7s 2,
                   scaledown 1.5s 2.0s 1 forwards;

}

tomasofen · Accepted Answer · 2022-05-16 10:26:36Z

0

Just as an idea, seven years later, you could think on an approach like the one proposed by "vsync" user in this other post for other problem:

CSS animate custom properties/variables

The idea would be to animate only css vars (with @property) in your "single" animations (scaleup, rotate, scaledown), and have a final animation with just one css transform using those animated values.

@property seems not to be wide supported on browsers (Chrome allows it, i think), and this is only an idea of a possible approach that could or could not work.

If someone test this, please, let us know ;)

answered May 16, 2022 at 10:26

tomasofen

1,4202 gold badges14 silver badges16 bronze badges

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

Collectives™ on Stack Overflow

CSS animation with multiple transforms but without nested divs

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related