## Compito
Migliorare l'aspetto visivo del modulo di autorizzazione aggiungendo un'animazione al pulsante "Log in". Seguire questi passaggi:

1. Specificare il valore corretto per la proprietà `animation-name`, utilizzando le modifiche di stato preimpostate definite nella regola `@keyframes` con il nome `colorChange`.
2. Impostare la funzione temporale su `linear` per garantire una velocità costante durante tutta l'animazione.
3. Definire una durata dell'animazione pari a `6000ms`.
4. Configurare l'animazione per ripetersi `infinite` volte per un effetto continuo.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxmb3JtIGNsYXNzPSJmb3JtIj4KICAgICAgICA8bGFiZWwgZm9yPSJtYWlsIiBjbGFzcz0ibGFiZWwiPiBFbWFpbCA8L2xhYmVsPgogICAgICAgIDxpbnB1dCB0eXBlPSJlbWFpbCIgaWQ9Im1haWwiIGNsYXNzPSJpbnB1dCIgLz4KICAgICAgICA8bGFiZWwgZm9yPSJwYXNzd29yZCIgY2xhc3M9ImxhYmVsIj4gUGFzc3dvcmQgPC9sYWJlbD4KICAgICAgICA8aW5wdXQgdHlwZT0icGFzc3dvcmQiIGlkPSJwYXNzd29yZCIgY2xhc3M9ImlucHV0IiAvPgogICAgICAgIDxidXR0b24gdHlwZT0ic3VibWl0IiBjbGFzcz0iYnV0dG9uIj5Mb2cgaW48L2J1dHRvbj4KICAgICAgPC9mb3JtPgogICAgPC9kaXY+CiAgPC9ib2R5Pgo8L2h0bWw+

LmJ1dHRvbiB7CiAgY3Vyc29yOiBwb2ludGVyOwogIGNvbG9yOiAjMDBmZmNhOwogIGZvbnQtc2l6ZTogMjRweDsKICBmb250LXdlaWdodDogNTAwOwogIGJvcmRlcjogbm9uZTsKICBib3JkZXItcmFkaXVzOiA1cHg7CiAgYmFja2dyb3VuZC1jb2xvcjogIzBhNGQ2ODsKICBwYWRkaW5nOiAxMHB4IDIwcHg7CiAgZGlzcGxheTogYmxvY2s7CiAgbWFyZ2luOiAwIGF1dG87CiAgLyogLS0tLS0tLS0tLS0tLS0tIE1ha2UgY2hhbmdlcyBiZWxvdyB0aGlzIGxpbmUgLS0tLS0tLS0tLS0tLS0tICovCiAgYW5pbWF0aW9uLW5hbWU6IF9fXzsKICBfX186IGxpbmVhcjsKICBfX186IF9fXzsKICBfX186IF9fXzsKICAvKiAtLS0tLS0tLS0tLS0tLS0gTWFrZSBjaGFuZ2VzIGFib3ZlIHRoaXMgbGluZSAtLS0tLS0tLS0tLS0tLS0gKi8KfQoKQGtleWZyYW1lcyBjb2xvckNoYW5nZSB7CiAgMCUgewogICAgYmFja2dyb3VuZC1jb2xvcjogIzBhNGQ2ODsKICB9CiAgMjUlIHsKICAgIGJhY2tncm91bmQtY29sb3I6ICMwODgzOTU7CiAgfQogIDUwJSB7CiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjMDViZmRiOwogIH0KICA3NSUgewogICAgYmFja2dyb3VuZC1jb2xvcjogIzA4ODM5NTsKICB9CiAgMTAwJSB7CiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjMGE0ZDY4OwogIH0KfQoKLyogTm90IHRoZSBjdXJyZW50IGZvY3VzICovCi5jb250YWluZXIgewogIG1hcmdpbjogMCBhdXRvOwogIHBhZGRpbmc6IDIwcHg7CiAgd2lkdGg6IDM0MHB4OwogIGJhY2tncm91bmQtY29sb3I6ICNmNGY0ZjQ7CiAgYm9yZGVyLXJhZGl1czogNXB4Owp9CgouZm9ybSB7CiAgZGlzcGxheTogZmxleDsKICBmbGV4LWRpcmVjdGlvbjogY29sdW1uOwp9CgoubGFiZWwgewogIG1hcmdpbi1ib3R0b206IDEwcHg7CiAgZm9udC13ZWlnaHQ6IDUwMDsKICBmb250LXNpemU6IDI0cHg7CiAgY29sb3I6ICM4YzkzOTc7Cn0KCi5pbnB1dCB7CiAgY29sb3I6ICMyMTIxMjE7CiAgb3V0bGluZTogbm9uZTsKICBtYXJnaW4tYm90dG9tOiAzMHB4OwogIGJvcmRlcjogMnB4IHNvbGlkICM4YzkzOTc7CiAgYm9yZGVyLXJhZGl1czogNXB4OwogIHBhZGRpbmc6IDhweDsKICBmb250LXNpemU6IDI0cHg7CiAgYmFja2dyb3VuZC1jb2xvcjogd2hpdGU7Cn0=

1. Assegnare il nome della regola `@keyframes` come valore per la proprietà `animation-name`.
2. Specificare `linear` come valore per la proprietà `animation-timing-function` per garantire una velocità costante.
3. Impostare la proprietà `animation-duration` su `6000ms` per determinare la durata dell'animazione.
4. Utilizzare `infinite` come valore per la proprietà `animation-iteration-count` per ripetere l'animazione indefinitamente.

LmJ1dHRvbiB7CiAgY3Vyc29yOiBwb2ludGVyOwogIGNvbG9yOiAjMDBmZmNhOwogIGZvbnQtc2l6ZTogMjRweDsKICBmb250LXdlaWdodDogNTAwOwogIGJvcmRlcjogbm9uZTsKICBib3JkZXItcmFkaXVzOiA1cHg7CiAgYmFja2dyb3VuZC1jb2xvcjogIzBhNGQ2ODsKICBwYWRkaW5nOiAxMHB4IDIwcHg7CiAgZGlzcGxheTogYmxvY2s7CiAgbWFyZ2luOiAwIGF1dG87CgogIGFuaW1hdGlvbi1uYW1lOiBjb2xvckNoYW5nZTsKICBhbmltYXRpb24tdGltaW5nLWZ1bmN0aW9uOiBsaW5lYXI7CiAgYW5pbWF0aW9uLWR1cmF0aW9uOiA2MDAwbXM7CiAgYW5pbWF0aW9uLWl0ZXJhdGlvbi1jb3VudDogaW5maW5pdGU7Cn0KCkBrZXlmcmFtZXMgY29sb3JDaGFuZ2UgewogIDAlIHsKICAgIGJhY2tncm91bmQtY29sb3I6ICMwYTRkNjg7CiAgfQogIDI1JSB7CiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjMDg4Mzk1OwogIH0KICA1MCUgewogICAgYmFja2dyb3VuZC1jb2xvcjogIzA1YmZkYjsKICB9CiAgNzUlIHsKICAgIGJhY2tncm91bmQtY29sb3I6ICMwODgzOTU7CiAgfQogIDEwMCUgewogICAgYmFja2dyb3VuZC1jb2xvcjogIzBhNGQ2ODsKICB9Cn0KCi8qIE5vdCB0aGUgY3VycmVudCBmb2N1cyAqLwouY29udGFpbmVyIHsKICBtYXJnaW46IDAgYXV0bzsKICBwYWRkaW5nOiAyMHB4OwogIHdpZHRoOiAzNDBweDsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjRmNGY0OwogIGJvcmRlci1yYWRpdXM6IDVweDsKfQoKLmZvcm0gewogIGRpc3BsYXk6IGZsZXg7CiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsKfQoKLmxhYmVsIHsKICBtYXJnaW4tYm90dG9tOiAxMHB4OwogIGZvbnQtd2VpZ2h0OiA1MDA7CiAgZm9udC1zaXplOiAyNHB4OwogIGNvbG9yOiAjOGM5Mzk3Owp9CgouaW5wdXQgewogIGNvbG9yOiAjMjEyMTIxOwogIG91dGxpbmU6IG5vbmU7CiAgbWFyZ2luLWJvdHRvbTogMzBweDsKICBib3JkZXI6IDJweCBzb2xpZCAjOGM5Mzk3OwogIGJvcmRlci1yYWRpdXM6IDVweDsKICBwYWRkaW5nOiA4cHg7CiAgZm9udC1zaXplOiAyNHB4OwogIGJhY2tncm91bmQtY29sb3I6IHdoaXRlOwp9

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.

Sfida: Implementazione di Animazione CSS

Compito

Awesome!

Sfida: Implementazione di Animazione CSS

Compito