Composizione 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.
Grazie per i tuoi commenti!
Chieda ad AI
Chieda ad AI
Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione
Can you explain what each value in the shorthand means?
Are there any best practices for using the shorthand animation property?
What happens if I omit some values in the shorthand?
Fantastico!
Completion tasso migliorato a 2.08
Composizione 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.
Grazie per i tuoi commenti!