Transitions e Animazioni Semplici

Bentornato.

Nella lezione precedente hai imparato backgrounds, bordi e ombre.

Le tue card sono diventate più rifinite.

I tuoi pulsanti hanno iniziato a sembrare rispettabili.

CSS finalmente si è pettinato.

Ora aggiungiamo movimento.

Non caos.

Non facciamo girare tutto come un sito creato da uno scoiattolo entusiasta.

Movimento fluido.

Oggi impareremo transitions e animazioni semplici.

Le transitions aiutano i cambiamenti CSS ad avvenire in modo fluido.

Le animations fanno muovere gli elementi automaticamente.

Usate bene, rendono un sito più vivo.

Usate male, fanno pensare agli utenti che la pagina abbia bisogno di assistenza medica.

Cosa Imparerai

In questa lezione imparerai:

cosa sono le CSS transitions;
come usare transition;
come animare effetti hover;
come usare transform;
come usare scale;
come usare translateY;
come creare pulsanti e card più fluidi;
cosa sono @keyframes;
come creare semplici animazioni CSS;
come evitare motion fastidioso.

Cos’è una Transition?

Una transition fa avvenire un cambiamento CSS gradualmente.

Senza transition:

.button:hover {
  background-color: #2563eb;
}

Il colore cambia subito.

Con transition:

.button {
  transition: background-color 0.2s ease;
}

.button:hover {
  background-color: #2563eb;
}

Ora il colore cambia in modo fluido.

Il browser dice:

“Tranquillo. Non salto. Scivolo.”

Questo è lo spirito giusto.

Crea il Progetto

Crea una cartella per questa lezione:

mkdir css-lesson9
cd css-lesson9
touch index.html
touch style.css

Dovresti avere:

css-lesson9/
  index.html
  style.css

Apri la cartella nel tuo editor.

Costruiremo una piccola landing page interattiva con:

navbar;
hero section;
pulsante animato;
card con hover effects;
una semplice animazione con keyframes.

Niente di troppo folle.

Questo non è un circo.

È un sito con buone maniere.

Scrivi l’HTML

Apri index.html e aggiungi questo:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Transitions e Animazioni Semplici</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="hero">
    <nav class="navbar">
      <h1 class="logo">MotionCSS</h1>

      <div class="nav-links">
        <a href="#">Home</a>
        <a href="#">Lezioni</a>
        <a href="#">Progetti</a>
        <a href="#">Contatto</a>
      </div>
    </nav>

    <section class="hero-content">
      <p class="eyebrow">CSS Motion</p>
      <h2>Fai Muovere la Tua Interfaccia in Modo Fluido</h2>
      <p>
        Transitions e animazioni aiutano il sito a sembrare più reattivo, rifinito e vivo.
      </p>
      <a href="#" class="button">Inizia a Muovere</a>
    </section>
  </header>

  <main class="page">
    <section class="intro-card">
      <h2>Il Movimento Deve Aiutare</h2>
      <p>
        Il buon movimento guida l’attenzione. Il cattivo movimento distrae gli utenti e rende la pagina nervosa.
      </p>
    </section>

    <section class="cards">
      <article class="card">
        <div class="icon">↗</div>
        <h2>Transitions</h2>
        <p>Rendono fluidi i cambiamenti di stile quando gli utenti passano sopra, fanno focus o interagiscono.</p>
      </article>

      <article class="card featured">
        <div class="icon">★</div>
        <h2>Transforms</h2>
        <p>Muovono, scalano, ruotano e modificano elementi senza rompere il layout.</p>
      </article>

      <article class="card">
        <div class="icon">∞</div>
        <h2>Animations</h2>
        <p>Creano movimento ripetuto o automatico con keyframes.</p>
      </article>
    </section>
  </main>

  <footer class="site-footer">
    <p>Creato mentre imparo CSS transitions e animazioni semplici.</p>
  </footer>
</body>
</html>

Questo ci dà:

hero;
navigazione;
pulsante;
intro card;
tre card;
icone;
footer.

Ora possiamo far muovere l’interfaccia.

Con attenzione.

Come un ninja.

Non come una lavatrice piena di mattoni.

Inizia con il CSS Base

Apri style.css e aggiungi:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

a {
  color: inherit;
  text-decoration: none;
}

Questo ci dà una base pulita.

Ora aggiungi gli stili per hero e navigazione:

.hero {
  background: linear-gradient(135deg, #111827, #312e81);
  color: white;
}

.navbar {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  margin: 0;
  font-size: 24px;
}

.nav-links {
  display: flex;
  gap: 20px;
  font-weight: 700;
}

Ora la pagina ha una hero scura e una navbar pulita.

Bene.

Nessun movimento ancora.

Il sito è fermo e si comporta educatamente.

Tra poco gli insegniamo a muoversi.

Stilizza il Contenuto Hero

Aggiungi questo:

.hero-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 80px 24px 96px;
  text-align: center;
}

.eyebrow {
  margin: 0 0 16px;
  color: #c4b5fd;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.hero-content h2 {
  margin: 0 0 20px;
  font-size: 56px;
  line-height: 1.1;
}

.hero-content p {
  color: #ddd6fe;
  font-size: 20px;
  line-height: 1.7;
}

Ora la hero sembra una vera sezione.

Titolo grande.

Paragrafo leggibile.

Piccola label.

Molto professionale.

Quasi sospettosamente calma.

Stilizza il Pulsante

Aggiungi questo:

.button {
  display: inline-block;
  background-color: white;
  color: #312e81;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 700;
  margin-top: 16px;
}

Il pulsante è già bello.

Ma non reagisce ancora.

È lì seduto.

Come un campanello che non suona.

Sistemiamolo.

Aggiungi una Transition

Aggiungi questo a .button:

.button {
  display: inline-block;
  background-color: white;
  color: #312e81;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 700;
  margin-top: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

Ora aggiungi hover:

.button:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
}

Ora quando passi sopra con il mouse, il pulsante si muove verso l’alto in modo fluido.

Importante:

La transition va nello stato normale.

Non solo su hover.

Corretto:

.button {
  transition: transform 0.2s ease;
}

.button:hover {
  transform: translateY(-3px);
}

Se metti la transition solo su hover, l’effetto può sembrare strano quando il mouse esce.

CSS è sensibile.

Come un violino.

Ma con punti e virgola.

La Proprietà transition

La proprietà transition può includere:

property duration timing-function delay

Esempio:

transition: background-color 0.3s ease;

Questo significa:

property: background-color;
duration: 0.3s;
timing: ease.

Puoi fare transition di più proprietà:

transition: transform 0.2s ease, box-shadow 0.2s ease;

Puoi anche fare transition di tutto:

transition: all 0.2s ease;

Ma fai attenzione con all.

Potrebbe animare cose che non ti aspettavi.

CSS ama le cose inattese.

A volte troppo.

Transform

La proprietà transform cambia come un elemento viene mostrato visivamente.

Può muovere, scalare, ruotare o inclinare un elemento.

Esempi:

transform: translateY(-4px);
transform: scale(1.05);
transform: rotate(3deg);

Transforms sono utili perché di solito non disturbano il resto del layout.

L’elemento si muove visivamente.

Ma il document flow resta stabile.

Questo è buono.

Un elemento che si muove non dovrebbe far andare in panico tutta la pagina.

Stilizza Pagina e Card

Aggiungi questo:

.page {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 24px;
}

.intro-card {
  background-color: white;
  padding: 32px;
  border: 2px solid #e5e7eb;
  border-radius: 24px;
  margin-bottom: 24px;
}

.intro-card h2 {
  margin-top: 0;
}

.intro-card p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.7;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

Ora stilizza ogni card:

.card {
  background-color: white;
  padding: 28px;
  border: 2px solid #e5e7eb;
  border-radius: 24px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.card h2 {
  margin-top: 16px;
}

.card p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.7;
}

La card ora ha una transition.

Ma serve ancora hover.

Effetto Hover sulle Card

Aggiungi:

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
  border-color: #7c3aed;
}

Ora la card si solleva leggermente quando passi sopra.

È un pattern comune.

Dice all’utente:

“Questo elemento è interattivo.”

Ma non esagerare con il movimento.

Male:

transform: translateY(-40px);

Così sembra che la card stia cercando di lasciare la riunione.

Meglio un movimento piccolo.

Animazione dell’Icona

Stilizza l’icona:

.icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background-color: #ede9fe;
  color: #6d28d9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  transition: transform 0.2s ease;
}

Ora fai muovere l’icona quando la card è in hover:

.card:hover .icon {
  transform: scale(1.1) rotate(3deg);
}

Questo significa:

Quando la card è in hover, cambia l’icona dentro di essa.

È utile.

Reagisce tutta la card.

Reagisce anche l’icona.

L’interfaccia sembra collegata.

Come se CSS avesse finalmente capito il lavoro di squadra.

Card Featured

Aggiungi:

.featured {
  border-color: #7c3aed;
  background-color: #f5f3ff;
}

Ora la card centrale si distingue.

La pagina ha gerarchia.

Gli utenti possono vedere cosa è importante.

Un buon design guida l’attenzione.

Un cattivo design lancia glitter e spera nel meglio.

Cosa Sono i Keyframes?

Le transitions avvengono quando una proprietà cambia.

Le animations possono partire automaticamente.

Per le animazioni usiamo @keyframes.

Esempio:

@keyframes float {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }

  100% {
    transform: translateY(0);
  }
}

Questo descrive un’animazione chiamata float.

All’inizio, l’elemento è normale.

A metà, si muove verso l’alto.

Alla fine, ritorna.

Ora possiamo applicarla.

Aggiungi una Semplice Animazione

Aggiungi questo:

@keyframes float {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }

  100% {
    transform: translateY(0);
  }
}

Ora applicala al pulsante:

.button {
  animation: float 3s ease-in-out infinite;
}

Questo fa fluttuare il pulsante dolcemente per sempre.

Ma attenzione.

Un’animazione infinita può diventare fastidiosa.

Usala solo quando è sottile.

Se il pulsante salta per sempre come se avesse bevuto sette espresso, gli utenti non ti ringrazieranno.

Uso Migliore dell’Animazione

Invece di animare per sempre il pulsante principale, puoi animare solo un piccolo elemento decorativo.

Per esempio, aggiungi l’effetto floating all’icona featured:

.featured .icon {
  animation: float 3s ease-in-out infinite;
}

Questo è più sottile.

La pagina sembra viva.

Ma non disperata.

Il buon movimento è calmo.

Il cattivo movimento sembra un sito che cerca attenzione durante un allarme antincendio.

Footer

Aggiungi:

.site-footer {
  text-align: center;
  padding: 32px 24px;
  color: #6b7280;
}

Footer semplice.

Nessuna animazione necessaria.

Non tutto deve muoversi.

Sul serio.

Non animare il footer solo perché puoi.

Il potere CSS va controllato.

CSS Completo

Il tuo style.css dovrebbe essere così:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

a {
  color: inherit;
  text-decoration: none;
}

.hero {
  background: linear-gradient(135deg, #111827, #312e81);
  color: white;
}

.navbar {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  margin: 0;
  font-size: 24px;
}

.nav-links {
  display: flex;
  gap: 20px;
  font-weight: 700;
}

.hero-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 80px 24px 96px;
  text-align: center;
}

.eyebrow {
  margin: 0 0 16px;
  color: #c4b5fd;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.hero-content h2 {
  margin: 0 0 20px;
  font-size: 56px;
  line-height: 1.1;
}

.hero-content p {
  color: #ddd6fe;
  font-size: 20px;
  line-height: 1.7;
}

.button {
  display: inline-block;
  background-color: white;
  color: #312e81;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 700;
  margin-top: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.button:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
}

.page {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 24px;
}

.intro-card {
  background-color: white;
  padding: 32px;
  border: 2px solid #e5e7eb;
  border-radius: 24px;
  margin-bottom: 24px;
}

.intro-card h2 {
  margin-top: 0;
}

.intro-card p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.7;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.card {
  background-color: white;
  padding: 28px;
  border: 2px solid #e5e7eb;
  border-radius: 24px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
  border-color: #7c3aed;
}

.card h2 {
  margin-top: 16px;
}

.card p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.7;
}

.icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background-color: #ede9fe;
  color: #6d28d9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  transition: transform 0.2s ease;
}

.card:hover .icon {
  transform: scale(1.1) rotate(3deg);
}

.featured {
  border-color: #7c3aed;
  background-color: #f5f3ff;
}

@keyframes float {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }

  100% {
    transform: translateY(0);
  }
}

.featured .icon {
  animation: float 3s ease-in-out infinite;
}

.site-footer {
  text-align: center;
  padding: 32px 24px;
  color: #6b7280;
}

@media (max-width: 800px) {
  .hero-content h2 {
    font-size: 42px;
  }

  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .navbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .nav-links {
    flex-direction: column;
    gap: 12px;
  }

  .hero-content {
    padding: 56px 20px 72px;
    text-align: left;
  }

  .hero-content h2 {
    font-size: 34px;
  }

  .hero-content p {
    font-size: 18px;
  }

  .cards {
    grid-template-columns: 1fr;
  }

  .intro-card,
  .card {
    padding: 24px;
  }
}

Salva.

Aggiorna.

Passa con il mouse sul pulsante.

Passa con il mouse sulle card.

Guarda l’icona featured fluttuare.

La tua pagina ora ha movimento.

Non troppo.

Solo abbastanza per sembrare viva.

Come un sito professionale che ha bevuto un caffè.

Non sette.

Errori Comuni

Animare Tutto

Cattiva idea:

* {
  transition: all 1s ease;
}

Questo può creare effetti strani ovunque.

Inputs.

Layout changes.

Sorprese nascoste.

Caos CSS con una bella giacca.

Sii specifico.

Meglio:

.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

Troppo Movimento

Male:

.card:hover {
  transform: rotate(20deg) scale(1.3);
}

A meno che tu stia costruendo un portfolio da clown, probabilmente è troppo.

Un movimento piccolo di solito funziona meglio.

.card:hover {
  transform: translateY(-4px);
}

Animazioni Infinite Ovunque

Le animazioni infinite possono distrarre.

Usale con attenzione.

Posti buoni:

piccole icone;
elementi decorativi sottili;
loading indicators.

Posti cattivi:

paragrafi;
intere sezioni;
ogni card;
footer;
la tua anima.

Nota di Accessibilità

Alcuni utenti preferiscono reduced motion.

CSS supporta questa cosa con:

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none;
    transition: none;
  }
}

Questo rispetta gli utenti che possono sentirsi male con troppo movimento.

Non devi usarlo in ogni esercizio da principiante.

Ma ricordalo.

I buoni siti si preoccupano degli utenti.

Non solo di sembrare cool.

Pratica

Crea tre card.

Ogni card dovrebbe:

sollevarsi leggermente su hover;
aumentare shadow su hover;
animare un’icona su hover;
usare transition;
restare leggibile.

Usa:

transition;
transform;
translateY;
scale;
box-shadow.

Mantieni il movimento piccolo.

Il tuo obiettivo è rifinitura.

Non panico.

Mini Sfida

Crea una sezione pricing con tre piani.

Aggiungi:

effetto lift su hover per le card;
effetto hover sui pulsanti;
piano featured con icona che fluttua delicatamente;
layout responsive;
reduced motion media query.

Questo è CSS motion reale.

Piccoli dettagli.

Grande differenza.

L’utente può non notare ogni animazione consapevolmente.

Ma sentirà che l’interfaccia è più fluida.

Questo è buon design.

Che fa il suo lavoro in silenzio.

Riassunto

Oggi hai imparato che:

transitions rendono fluidi i cambiamenti CSS;
transition di solito va nello stato normale;
transform può muovere, scalare e ruotare elementi;
translateY è utile per effetti hover lift;
scale può rendere icone o pulsanti più interattivi;
box-shadow può essere animato per creare profondità;
@keyframes crea animazioni CSS;
le animazioni infinite devono essere sottili;
non tutto deve muoversi;
il buon movimento supporta l’usabilità.

Il movimento è potente.

Usalo con attenzione.

Un po’ di movimento può rendere il sito vivo.

Troppo movimento lo fa sembrare scappato da un cartone animato.

Prossima Lezione

Nella prossima lezione finiremo il corso con un mini progetto completo.

Combineremo layout, responsive design, card, pulsanti e styling rifinito.

La toolbox CSS è quasi pronta.