Egenskaben transition

Egenskaben transition er en sammentrækning for jævne overgange, den tillader dig at angive transition-duration, transition-property, transition-timing-function og transition-delay samtidigt.

Syntaks

cssselektor {
  transition: værdi;
}

Rækkefølgen af egenskaber har ikke betydning, dog skal varigheden (transition-duration) stå før forsinkelsen (transition-delay).

Værdier

Se de tilsvarende egenskaber. Standardværdi: all 0s ease 0s.

Værdien none annullerer alle overgange (de vil foregå øjeblikkeligt).

Eksempel

Hold musen over blokken - i 3 sekunder vil der ikke ske noget (der er en forsinkelse på 3s), og så vil den jævnt ændre sin bredde over 2 sekunder. Hvis du fjerner musen - vil der igen i 3 sekunder ikke ske noget, og så vil bredden jævnt formindskes til den oprindelige værdi:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  transition: width 2s ease 3s;
  width: 100px;
  height: 50px;
}
#elem:hover {
  width: 400px;
}

Результат:

Se også