CSS
HTML
JavaScript
PHP
Introduzione
Coming Soon
Generatori
Varie

CSS transition

La proprietà CSS3 transition anima i cambiamenti delle proprietà CSS

La proprietà transition in CSS3 consente di rendere fluido il passaggio tra due stati di un elemento. Specificando proprietà come duration, timing-function e delay, è possibile ottenere effetti visivi dinamici senza utilizzare JavaScript.

Sintassi

transition: property duration timing-function delay;

Significato dei valori principali:

  • property: La proprietà CSS da animare (es: background-color, width, opacity). Può essere anche all.

  • duration: La durata della transizione (es: 0.3s, 1s, 500ms).

  • timing-function: La funzione che definisce la velocità dell’animazione nel tempo (es: ease, linear, ease-in, ease-out, cubic-bezier()).

  • delay: Ritardo prima dell’inizio della transizione (es: 0s, 1s).


Esempio proprietà: transition


Codice Esempio: transition

CODE: CSSpreleva codice
  1. .transition-example {
  2.   width: 300px;
  3.   height: 150px;
  4.   background-color: #61afef;
  5.   color: white;
  6.   font-size: 20px;
  7.   display: flex;
  8.   justify-content: center;
  9.   align-items: center;
  10.   border-radius: 10px;
  11.   transition: background-color 0.5s ease;
  12. }
  13.  
  14. .transition-example:hover {
  15.   background-color: #e06c75;
  16. }

Contenuto Esempio: transition

Esempio di utilizzo di transition

In questo esempio, al passaggio del mouse, l'elemento cambia colore di sfondo con una transizione fluida della durata di 0.5 secondi:


Passa il mouse qui

CSS e HTML per l'elemento con transition applicata:

  
  <style>
    .transition-example {
      width: 300px;
      height: 150px;
      background-color: #61afef;
      color: white;
      font-size: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 10px;
      transition: background-color 0.5s ease;
    }

    .transition-example:hover {
      background-color: #e06c75;
    }
  </style>

  <div class="transition-example">
    Passa il mouse qui
  </div>
  

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser

Browser Support

I Cookie su questo sito:

Il nostro sito utilizza cookie e altre tecnologie in modo tale che sia noi, sia i nostri partner, possiamo ricordarci di te e capire come tu e gli altri visitatori utilizzate il nostro sito. Qui puoi trovare ulteriori informazioni sui cookie e le altre tecnologie. Chiudendo questo banner o continuando la navigazione acconsenti all'uso dei cookie. Acconsento Info Cookies