Esercizi Animazioni CSS
Entra nel mondo delle animazioni CSS con questi esercizi divertenti e interattivi. Pratica l’uso delle animazioni per dare vita ai tuoi elementi HTML, creando movimenti eleganti e sorprendenti.
Esercizio 1
Crea una pagina HTML con un elemento che abbia un colore di sfondo rosso. Applica un'animazione CSS al colore di sfondo in modo che cambia gradualmente in blu e poi torna a rosso in un loop infinito.
<!DOCTYPE html><html> <head> <title>Esercizio 1</title> <style> .animation { width: 100px; height: 100px; background-color: red; animation: changeColor 2s infinite; }
@keyframes changeColor { 0% { background-color: red; } 50% { background-color: blue; } 100% { background-color: red; } } </style> </head> <body> <div class="animation"></div> </body></html>
Esercizio 2
Crea una pagina HTML con un elemento di dimensioni 100x100 pixel e di colore verde. Applica un'animazione CSS alle dimensioni del div in modo che cambiano gradualmente a 150x150 pixel e poi tornano a 100x100 pixel in un loop infinito.
<!DOCTYPE html><html> <head> <title>Esercizio 2</title> <style> .animation { width: 100px; height: 100px; background-color: green; animation: changeSize 2s infinite; }
@keyframes changeSize { 0% { width: 100px; height: 100px; } 50% { width: 150px; height: 150px; } 100% { width: 100px; height: 100px; } } </style> </head> <body> <div class="animation"></div> </body></html>
Esercizio 3
Crea una pagina HTML con un elemento di colore blu. Applica un'animazione CSS al colore di sfondo in modo che cambia gradualmente in rosso e poi torna a blu in un loop infinito.
<!DOCTYPE html><html> <head> <title>Esercizio 3</title> <style> .animation { width: 100px; height: 100px; background-color: blue; animation: changeColor 2s infinite; }
@keyframes changeColor { 0% { background-color: blue; } 50% { background-color: red; } 100% { background-color: blue; } } </style> </head> <body> <div class="animation"></div> </body></html>
Esercizio 4
Crea una pagina HTML con un elemento di dimensioni 150x150 pixel e di colore giallo. Applica un'animazione CSS alle dimensioni e al colore di sfondo del div in modo che cambiano gradualmente a 200x200 pixel e verde, e poi tornano a 150x150 pixel e giallo, in un loop infinito.
<!DOCTYPE html><html> <head> <title>Esercizio 4</title> <style> .animation { width: 150px; height: 150px; background-color: yellow; animation: changeSizeAndColor 2s infinite; }
@keyframes changeSizeAndColor { 0% { width: 150px; height: 150px; background-color: yellow; } 50% { width: 200px; height: 200px; background-color: green; } 100% { width: 150px; height: 150px; background-color: yellow; } } </style> </head> <body> <div class="animation"></div> </body></html>
Esercizio 5
Crea una pagina HTML con un elemento di colore arancione. Applica un'animazione CSS al colore di sfondo in modo che cambia gradualmente in viola e poi torna a arancione in un loop infinito.
<!DOCTYPE html><html> <head> <title>Esercizio 5</title> <style> .animation { width: 100px; height: 100px; background-color: orange; animation: changeColor 2s infinite; }
@keyframes changeColor { 0% { background-color: orange; } 50% { background-color: purple; } 100% { background-color: orange; } } </style> </head> <body> <div class="animation"></div> </body></html>
Esercizio 6
Crea una pagina HTML con un elemento di dimensioni 200x100 pixel e di colore magenta. Applica un'animazione CSS alla posizione del div in modo che si sposta di 50 pixel verso destra quando il mouse vi passa sopra.
<!DOCTYPE html><html> <head> <title>Esercizio 6</title> <style> .animation { width: 200px; height: 100px; background-color: magenta; }
.animation:hover { animation: moveRight 1s; }
@keyframes moveRight { 0% { transform: translateX(0); } 100% { transform: translateX(50px); } } </style> </head> <body> <div class="animation"></div> </body></html>
Esercizio 7
Crea una pagina HTML con un elemento di dimensioni 100x100 pixel e di colore ciano. Applica un'animazione CSS alla rotazione del div in modo che ruota di 45 gradi quando il mouse vi passa sopra.
<!DOCTYPE html><html> <head> <title>Esercizio 7</title> <style> .animation { width: 100px; height: 100px; background-color: cyan; }
.animation:hover { animation: rotate 1s; }
@keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(45deg); } } </style> </head> <body> <div class="animation"></div> </body></html>
Esercizio 8
Crea una pagina HTML con un elemento di dimensioni 150x150 pixel e di colore verde. Applica un'animazione CSS alle dimensioni del div in modo che cambiano gradualmente a 200x100 pixel quando il mouse vi passa sopra.
<!DOCTYPE html><html> <head> <title>Esercizio 8</title> <style> .animation { width: 150px; height: 150px; background-color: green; }
.animation:hover { animation: changeSize 1s; }
@keyframes changeSize { 0% { width: 150px; height: 150px; } 100% { width: 200px; height: 100px; } } </style> </head> <body> <div class="animation"></div> </body></html>
Esercizio 9
Crea una pagina HTML con un elemento di colore blu. Applica un'animazione CSS al colore di sfondo in modo che cambia gradualmente in rosso e poi torna a blu in un loop infinito.
<!DOCTYPE html><html> <head> <title>Esercizio 9</title> <style> .animation { width: 100px; height: 100px; background-color: blue; animation: changeColor 2s infinite; }
@keyframes changeColor { 0% { background-color: blue; } 50% { background-color: red; } 100% { background-color: blue; } } </style> </head> <body> <div class="animation"></div> </body></html>
Esercizio 10
Crea una pagina HTML con un elemento di dimensioni 200x200 pixel e di colore giallo. Applica un'animazione CSS alle dimensioni del div in modo che cambiano gradualmente a 150x150 pixel quando il div ottiene il focus.
<!DOCTYPE html><html> <head> <title>Esercizio 10</title> <style> .animation { width: 200px; height: 200px; background-color: yellow; }
.animation:focus { animation: changeSize 1s; }
@keyframes changeSize { 0% { width: 200px; height: 200px; } 100% { width: 150px; height: 150px; } } </style> </head> <body> <div tabindex="0" class="animation"> Clicca qui per dare il focus e vedere la transizione delle dimensioni. </div> </body></html>