Transizioni CSS

Transizioni CSS

Le transizioni CSS permettono di animare i cambiamenti delle proprietà in modo fluido.

Sintassi

.button {
 background: blue;
 transition: background 0.3s ease;
}

.button:hover {
 background: darkblue;
}

Proprietà transition

  • transition-property: proprietà da animare (o all)
  • transition-duration: durata (es. 0.3s, 300ms)
  • transition-timing-function: ease, linear, ease-in, ease-out, ease-in-out
  • transition-delay: ritardo prima dell avvio

Shorthand

.box {
 transition: all 0.3s ease-in-out 0.1s;
 /* property duration timing delay */
}

Hai trovato utile quest'articolo?

  • Introduzione al CSS

    Introduzione al CSS Il CSS (Cascading Style Sheets) è il linguaggio utilizzato per definire lo stile...
  • Selettori Css di Base

    Selettori Css di Base I selettori CSS permettono di identificare gli elementi HTML a cui applicare g...
  • Proprietà color e background

    Proprietà color e background Le proprietà color e background sono fondamentali per definire l'aspett...
  • Margin e Padding

    Margin e Padding Margin e Padding controllano lo spazio intorno e dentro gli elementi.Differenza chi...
  • Box Model CSS

    Box Model CSS Il Box Model è il concetto fondamentale che descrive come ogni elemento HTML è rappres...