Својство transition-delay

Својството transition-delay поставува одложување пред започнување на мазна транзиција transition.

Синтакса

cssселектор {
  transition-delay: време во s или ms;
}

Вредности

Стандардна вредност: 0s.

Пример

Лизгајте го глушецот над блокот - 3 секунди ништо нема да се случува (поставено е одложување 3s), а потоа тој мазно ќе ја промени својата ширина за 2 секунди. Ако потоа го тргнете глушецот - повторно 3 секунди ништо нема да се случува, а потоа ширината мазно ќе се намали до оригиналната вредност:

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

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

Результат:

Пример

Лизгајте го глушецот над блокот - тој прво ќе ја промени својата ширина за 2 секунди, а потоа ќе ја промени својата висина за 4 секунди. Својствата ќе се менуваат последователно, бидејќи за висината е поставено одложување од 3 секунди (време на промена на ширината). Ако го тргнете глушецот - тогаш промените ќе се случат во обратен редослед: прво ќе се намали ширината, а потоа ќе се намали висината:

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

css#elem {
  border: 1px solid black;
  transition-duration: 2s, 4s;
  transition-property: width, height;
  transition-delay: 0s, 3s;
  width: 100px;
  height: 25px;
}
#elem:hover {
  width: 400px;
  height: 50px;
}

Результат:

Погледнете ги исто така