Home esercizi css animazioni

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>