Intermedio14 min

Animazioni e Transizioni

Aggiungere movimento e interattività con transition, transform e @keyframes.

Animazioni e Transizioni

Le transizioni rendono i cambiamenti di stato fluidi, le animazioni creano movimenti autonomi. Usate con moderazione, migliorano l'esperienza utente.

Transizioni

Una transizione anima il passaggio tra due stati di una proprietà.

css

.bottone {
  background-color: var(--primary);
  transform: scale(1);
  transition: all 0.3s ease;
}

.bottone:hover {
  background-color: var(--primary-dark);
  transform: scale(1.05);
}

Transform

Transform modifica la geometria dell'elemento senza alterare il layout.

css

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

.icona {
  transform: scale(1.2) rotate(45deg);
  transform-origin: center;
}

Animazioni con @keyframes

Per movimenti più complessi e ripetuti, usa @keyframes.

css

@keyframes pulsare {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}

.notifica {
  animation: pulsare 2s ease-in-out infinite;
}

Rispettare le preferenze utente

Alcuni utenti preferiscono ridurre le animazioni. Rispetta questa scelta.

css

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

●Transizioni sotto i 300ms per le interazioni UI
●Usa transform e opacity — sono le proprietà più performanti
●Evita di animare width, height o top/left