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
Awesome!
Completion rate improved to 2.04Composizione 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!
