Transition īpašība

Īpašība transition ir saīsinājums gludām pārejām, ļauj vienlaicīgi iestatīt transition-duration, transition-property, transition-timing-function un transition-delay.

Sintakse

cssselector {
  transition: vērtība;
}

Īpašību secībai nav nozīmes, tomēr izpildes laiks (transition-duration) jāatrodas pirms aizkaves (transition-delay).

Vērtības

Skatīties atbilstošās īpašības. Noklusējuma vērtība: all 0s ease 0s.

Vērtība none atceļ visas pārejas (tās notiks acumirklī).

Piemērs

Novietojiet peles kursoru virs bloka - 3 sekundes nekas nenotiks (iestatīta 3 sekunžu aizkave), pēc tam tas gludi mainīs savu platumu 2 sekunžu laikā. Ja pēc tam noņemsit peles kursoru - atkal 3 sekundes nekas nenotiks, pēc tam platums gludi samazināsies līdz sākotnējai vērtībai:

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

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

Результат:

Skatiet arī