Svojstvo transition

Svojstvo transition je skraćenje za postepene prelaze, omogućava da se istovremeno podesi transition-duration, transition-property, transition-timing-function i transition-delay.

Sintaksa

cssselektor {
  transition: vrednost;
}

Redosled svojstava nije bitan, međutim vreme trajanja (transition-duration) mora da stoji pre kašnjenja (transition-delay).

Vrednosti

Vidite odgovarajuća svojstva. Podrazumevana vrednost: all 0s ease 0s.

Vrednost none poništava sve prelaze (oni će se odvijati trenutno).

Primer

Postavite miš iznad bloka - 3 sekunde neće se ništa dešavati (postavljeno je kašnjenje od 3s), a zatim će on postepeno promeniti svoju širinu za 2 sekunde. Ako zatim uklonite miš - ponovo će 3 sekunde ništa ne biti, a zatim će se širina postepeno smanjiti na početnu vrednost:

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

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

Результат:

Pogledajte takođe