Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Impara Composizione di Animazioni Multiple | Animazioni CSS Avanzate
Tecniche CSS Avanzate

bookComposizione di Animazioni Multiple

È possibile utilizzare la forma abbreviata per specificare tutte le proprietà dell'animazione. La sintassi è la seguente:

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

Riscriviamo brevemente le seguenti proprietà.

Metodo esteso

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;

Forma abbreviata

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

Questa sintassi può sembrare complessa e si rischia facilmente di omettere qualche valore. Tuttavia, questa possibilità è disponibile.

Nota

Per il browser non vi è alcuna differenza tra la forma abbreviata e quella estesa per la specifica dell'animazione.

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 4. Capitolo 5

Chieda ad AI

expand

Chieda ad AI

ChatGPT

Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione

Awesome!

Completion rate improved to 2.04

bookComposizione di Animazioni Multiple

Scorri per mostrare il menu

È possibile utilizzare la forma abbreviata per specificare tutte le proprietà dell'animazione. La sintassi è la seguente:

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

Riscriviamo brevemente le seguenti proprietà.

Metodo esteso

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;

Forma abbreviata

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

Questa sintassi può sembrare complessa e si rischia facilmente di omettere qualche valore. Tuttavia, questa possibilità è disponibile.

Nota

Per il browser non vi è alcuna differenza tra la forma abbreviata e quella estesa per la specifica dell'animazione.

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 4. Capitolo 5
some-alt