2

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;

}

1 Answer 1

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 ;)

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.