CSS Transizione (longhand)


Esempio

CSS

div {
  height: 100px;
  width: 100px;
  border: 1px solid;
  transition-property: height, width;
  transition-duration: 1s, 500ms;
  transition-timing-function: linear;
  transition-delay: 0s, 1s;
}
div:hover {
  height: 200px;
  width: 200px;
}

HTML

<div></div>
  • transition-property : specifica le proprietà CSS per cui l'effetto di transizione è valido. In questo caso, il div si espanderà sia orizzontalmente che verticalmente quando si librerà.
  • transition-duration : specifica il tempo che una transizione impiega per completare. Nell'esempio sopra, le transizioni di altezza e larghezza impiegheranno rispettivamente 1 secondo e 500 millisecondi.
  • transition-timing-function : specifica la curva di velocità dell'effetto di transizione. Un valore lineare indica che la transizione avrà la stessa velocità dall'inizio alla fine.
  • transizione-ritardo : specifica la quantità di tempo necessario per attendere prima che inizi l'effetto di transizione. In questo caso, l'altezza inizierà immediatamente la transizione, mentre la larghezza attenderà 1 secondo.