Уласцівасць transition

Уласцівасць transition - скарачэнне для плаўных пераходаў, дазваляе адначасова задаць transition-duration, transition-property, transition-timing-function і transition-delay.

Сінтаксіс

cssселектар {
  transition: значэнне;
}

Парадак уласцівасцяў значэння не мае, аднак час выканання (transition-duration) павінен стаяць перад затрымкай (transition-delay).

Значэнні

Гл. адпаведныя ўласцівасці. Значэнне па змаўчанні: all 0s ease 0s.

Значэнне none адмяняе ўсе пераходы (яны стануць адбывацца імгненна).

Прыклад

Навядзіце мышэй на блок - 3 секунды нічога не будзе адбывацца (стаяе затрымка 3s), а потым ён плаўна зменіць сваю шырыню за 2 секунды. Калі потым прыбраць мыш - то зноў 3 секунды нічога не будзе адбывацца, а потым шырыня плаўна паменшыцца да першапачатковага значэння:

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

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

Результат:

Глядзіце таксама