Summary  
This chapter explains how to configure the number of times an animation repeats and control its playback direction using animation-iteration-count and animation-direction properties.  

General domain of usage  
Web user interface animations

### Proprietà animation-iteration-count
È possibile controllare quante volte deve essere eseguita un'animazione. `animation-iteration-count` imposta il numero di ripetizioni dell'animazione.
```css 
animation-iteration-count: number_without_units
```
Si può anche specificare la parola chiave `infinite` come valore. In questo modo, l'animazione verrà eseguita continuamente.
Considerare il seguente esempio per vedere come influenzare il numero di ripetizioni dell'animazione:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxkaXYgY2xhc3M9Iml0ZW0iPgogICAgICAgIDxwPldpdGhvdXQgaXRlcmF0aW9uIGNvdW50PC9wPgogICAgICAgIDxpbWcKICAgICAgICAgIGNsYXNzPSJmaXJzdC1pbWFnZSIKICAgICAgICAgIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY29kZS0xL2FkdmFuY2VkK2Nzcyt0ZWNobmlxdWVzL2FuaW1hdGlvbnMrc2VjdGlvbi9wbGFuZXQtZWFydGgrKDEpLnBuZyIKICAgICAgICAgIGFsdD0iRWFydGgiCiAgICAgICAgICB3aWR0aD0iMTAwcHgiCiAgICAgICAgLz4KICAgICAgPC9kaXY+CgogICAgICA8ZGl2IGNsYXNzPSJpdGVtIj4KICAgICAgICA8cD5XaXRoIGl0ZXJhdGlvbiBjb3VudCAoNSk8L3A+CiAgICAgICAgPGltZwogICAgICAgICAgY2xhc3M9InNlY29uZC1pbWFnZSIKICAgICAgICAgIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY29kZS0xL2FkdmFuY2VkK2Nzcyt0ZWNobmlxdWVzL2FuaW1hdGlvbnMrc2VjdGlvbi9wbGFuZXQtZWFydGgrKDEpLnBuZyIKICAgICAgICAgIGFsdD0iRWFydGgiCiAgICAgICAgICB3aWR0aD0iMTAwcHgiCiAgICAgICAgLz4KICAgICAgPC9kaXY+CgogICAgICA8ZGl2IGNsYXNzPSJpdGVtIj4KICAgICAgICA8cD5XaXRoIGl0ZXJhdGlvbiBjb3VudCAoaW5maW5pdGUpPC9wPgogICAgICAgIDxpbWcKICAgICAgICAgIGNsYXNzPSJ0aGlyZC1pbWFnZSIKICAgICAgICAgIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY29kZS0xL2FkdmFuY2VkK2Nzcyt0ZWNobmlxdWVzL2FuaW1hdGlvbnMrc2VjdGlvbi9wbGFuZXQtZWFydGgrKDEpLnBuZyIKICAgICAgICAgIGFsdD0iRWFydGgiCiAgICAgICAgICB3aWR0aD0iMTAwcHgiCiAgICAgICAgLz4KICAgICAgPC9kaXY+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LyogVGhpcyBjaGFwdGVyIGZvY3VzICovCmltZyB7CiAgYW5pbWF0aW9uLW5hbWU6IHNwaW5uZXI7CiAgYW5pbWF0aW9uLWR1cmF0aW9uOiAzczsKICBhbmltYXRpb24tdGltaW5nLWZ1bmN0aW9uOiBsaW5lYXI7Cn0KCkBrZXlmcmFtZXMgc3Bpbm5lciB7CiAgMCUgewogICAgdHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7CiAgfQoKICAxMDAlIHsKICAgIHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7CiAgfQp9Cgouc2Vjb25kLWltYWdlIHsKICBhbmltYXRpb24taXRlcmF0aW9uLWNvdW50OiA1Owp9CgoudGhpcmQtaW1hZ2UgewogIGFuaW1hdGlvbi1pdGVyYXRpb24tY291bnQ6IGluZmluaXRlOwp9CgovKiBOb3QgdGhlIGN1cnJlbnQgZm9jdXMgKi8KLmNvbnRhaW5lciB7CiAgZGlzcGxheTogZmxleDsKICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWFyb3VuZDsKICB3aWR0aDogMTAwJTsKfQoKLml0ZW0gewogIGJvcmRlcjogMXB4IHNvbGlkIGRhcmtibHVlOwogIHdpZHRoOiAyMDBweDsKICBwYWRkaW5nOiAxMHB4OwogIGRpc3BsYXk6IGZsZXg7CiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsKICBhbGlnbi1pdGVtczogY2VudGVyOwp9CgpwIHsKICB0ZXh0LWFsaWduOiBjZW50ZXI7CiAgZm9udC1zaXplOiAxOHB4OwogIG1hcmdpbi10b3A6IDA7Cn0=

### Proprietà animation-direction
`animation-direction` controlla la direzione dell'animazione. Determina se un'animazione deve essere eseguita in avanti, all'indietro o alternare tra avanti e indietro.
```css
animation-direction: normal | reverse | alternate | alternate-reverse
```
- `normal` - valore predefinito. L'animazione verrà eseguita in avanti dall'inizio alla fine;
- `reverse` - L'animazione verrà eseguita all'indietro dalla fine all'inizio;
- `alternate` - L'animazione verrà eseguita in avanti e poi all'indietro, alternando tra le due direzioni;
- `alternate-reverse` - L'animazione verrà eseguita all'indietro e poi in avanti, alternando tra le due direzioni.

Vediamo quale effetto possiamo ottenere nel seguente esempio. Avremo un'immagine in cui il comportamento predefinito è quello di muoversi ripetutamente da sinistra a destra. Tuttavia, possiamo modificarne il comportamento. Testeremo tutti e quattro i valori per la proprietà `animation-direction`.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxwPmFuaW1hdGlvbi1kaXJlY3Rpb246IG5vcm1hbDwvcD4KICAgICAgPGltZwogICAgICAgIGNsYXNzPSJpbWFnZS1vbmUiCiAgICAgICAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvYWR2YW5jZWQrY3NzK3RlY2huaXF1ZXMvYW5pbWF0aW9ucytzZWN0aW9uL2V4YW1wbGUrZm9yK3RoZSthbmltYXRpb24rZGlyZWN0aW9uK3Byb3BlcnR5LnBuZyIKICAgICAgICBhbHQ9ImRvZyIKICAgICAgICB3aWR0aD0iMTAwcHgiCiAgICAgIC8+CiAgICA8L2Rpdj4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxwPmFuaW1hdGlvbi1kaXJlY3Rpb246IHJldmVyc2U8L3A+CiAgICAgIDxpbWcKICAgICAgICBjbGFzcz0iaW1hZ2UtdHdvIgogICAgICAgIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY29kZS0xL2FkdmFuY2VkK2Nzcyt0ZWNobmlxdWVzL2FuaW1hdGlvbnMrc2VjdGlvbi9leGFtcGxlK2Zvcit0aGUrYW5pbWF0aW9uK2RpcmVjdGlvbitwcm9wZXJ0eS5wbmciCiAgICAgICAgYWx0PSJkb2ciCiAgICAgICAgd2lkdGg9IjEwMHB4IgogICAgICAvPgogICAgPC9kaXY+CiAgICA8ZGl2IGNsYXNzPSJjb250YWluZXIiPgogICAgICA8cD5hbmltYXRpb24tZGlyZWN0aW9uOiBhbHRlcm5hdGU8L3A+CiAgICAgIDxpbWcKICAgICAgICBjbGFzcz0iaW1hZ2UtdGhyZWUiCiAgICAgICAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvYWR2YW5jZWQrY3NzK3RlY2huaXF1ZXMvYW5pbWF0aW9ucytzZWN0aW9uL2V4YW1wbGUrZm9yK3RoZSthbmltYXRpb24rZGlyZWN0aW9uK3Byb3BlcnR5LnBuZyIKICAgICAgICBhbHQ9ImRvZyIKICAgICAgICB3aWR0aD0iMTAwcHgiCiAgICAgIC8+CiAgICA8L2Rpdj4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxwPmFuaW1hdGlvbi1kaXJlY3Rpb246IGFsdGVybmF0ZS1yZXZlcnNlPC9wPgogICAgICA8aW1nCiAgICAgICAgY2xhc3M9ImltYWdlLWZvdXIiCiAgICAgICAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvYWR2YW5jZWQrY3NzK3RlY2huaXF1ZXMvYW5pbWF0aW9ucytzZWN0aW9uL2V4YW1wbGUrZm9yK3RoZSthbmltYXRpb24rZGlyZWN0aW9uK3Byb3BlcnR5LnBuZyIKICAgICAgICBhbHQ9ImRvZyIKICAgICAgICB3aWR0aD0iMTAwcHgiCiAgICAgIC8+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LyogVGhpcyBjaGFwdGVyIGZvY3VzICovCmltZyB7CiAgYW5pbWF0aW9uLW5hbWU6IGhvcml6b250YWwtdHJhbnNsYXRpb247CiAgYW5pbWF0aW9uLWR1cmF0aW9uOiAzMDAwbXM7CiAgYW5pbWF0aW9uLXRpbWluZy1mdW5jdGlvbjogbGluZWFyOwogIGFuaW1hdGlvbi1pdGVyYXRpb24tY291bnQ6IGluZmluaXRlOwp9CgpAa2V5ZnJhbWVzIGhvcml6b250YWwtdHJhbnNsYXRpb24gewogIDAlIHsKICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWCgwKTsKICB9CgogIDEwMCUgewogICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVYKDU0MHB4KTsKICB9Cn0KCi5pbWFnZS1vbmUgewogIGFuaW1hdGlvbi1kaXJlY3Rpb246IG5vcm1hbDsKfQoKLmltYWdlLXR3byB7CiAgYW5pbWF0aW9uLWRpcmVjdGlvbjogcmV2ZXJzZTsKfQoKLmltYWdlLXRocmVlIHsKICBhbmltYXRpb24tZGlyZWN0aW9uOiBhbHRlcm5hdGU7Cn0KCi5pbWFnZS1mb3VyIHsKICBhbmltYXRpb24tZGlyZWN0aW9uOiBhbHRlcm5hdGUtcmV2ZXJzZTsKfQoKLyogTm90IHRoZSBjdXJyZW50IGZvY3VzICovCi5jb250YWluZXIgewogIGJvcmRlcjogMXB4IHNvbGlkIGRhcmtibHVlOwogIHBhZGRpbmc6IDEwcHg7CiAgd2lkdGg6IDY0MHB4Owp9CgpwIHsKICBtYXJnaW4tdG9wOiAwOwp9

Migliora le tue competenze di styling padroneggiando tecniche CSS avanzate per il web design moderno. Posiziona e gestisci gli elementi con precisione utilizzando strategie di posizionamento avanzate. Crea transizioni fluide e animazioni coinvolgenti per migliorare l'esperienza utente. Trasforma e manipola gli elementi per effetti visivi dinamici. Realizza design responsivi che si adattano a diversi dispositivi e ottimizza il flusso di lavoro con preprocessori CSS come Sass.

Scopri cosa possono aspettarsi gli studenti da questo corso avanzato di HTML e CSS. Quali conoscenze sono necessarie prima di iniziare il corso? Quali argomenti verranno trattati?

Posizionamento e gestione degli elementi nelle pagine web. Approfondimento delle diverse proprietà di posizionamento, utilizzo dell'ordine di sovrapposizione per controllare la visibilità degli elementi sovrapposti e gestione dell'overflow dei contenuti.

Esplora il potenziale delle transizioni e apprendi come migliorare l'esperienza utente. Scopri come animare le proprietà in modo fluido e graduale, creando transizioni di stato senza soluzione di continuità.

Scopri la proprietà animation e come può essere utilizzata per creare design dinamici e coinvolgenti. Approfondisci la creazione di animazioni complesse utilizzando i keyframe e il controllo dell'animazione.

Esplora la proprietà di trasformazione, che consente di modificare l'aspetto e la posizione degli elementi in una pagina web. Scopri come ridimensionare, ruotare, inclinare e traslare elementi in due e tre dimensioni. Combina più trasformazioni per creare effetti più complessi.

I principi e le tecniche utilizzate nel design adattivo/responsive mirano a rendere siti web e applicazioni accessibili e visivamente attraenti su diversi dispositivi, dimensioni dello schermo e orientamenti.

Scopri i preprocessori in CSS e come possono aiutare a scrivere codice più efficiente e manutenibile. Comprendi come utilizzare i preprocessori per semplificare il flusso di lavoro e generare codice CSS più pulito.

Controllo dell'Iterazione e della Direzione dell'Animazione

Proprietà animation-iteration-count

Proprietà animation-direction

Awesome!

Controllo dell'Iterazione e della Direzione dell'Animazione

Proprietà animation-iteration-count

Proprietà animation-direction