Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lära Composing Multiple Animations | Advanced CSS Animations
Advanced CSS Techniques

book
Composing Multiple Animations

We can use the shorthand form to specify all animation properties. The syntax is following:

css
animation: <name> <duration> <timing_function> <delay> <iteration-count> <direction> <fill-mode> <play-state>

Let's rewrite the next properties briefly.

Long way

css
animation-name: Rotation;
animation-duration: 5s;
animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
animation-delay: 100ms;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: backwards;
animation-play-state: running;

shorthand

css
animation: Rotation 5s cubic-bezier(0.075, 0.82, 0.165, 1) 100ms infinite alternate backwards running;

It looks so confusing, and we can miss some value easily. However, we have such an opportunity.

Note

For the browser, there is no difference between the shorthand and the long way of specifying the animation.

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 4. Kapitel 5

Fråga AI

expand

Fråga AI

ChatGPT

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

We use cookies to make your experience better!
some-alt