Уласцівасць transition-delay
Уласцівасць transition-delay ўстанаўлівае
затрымку перад запускам плаўнага пераходу
transition.
Сінтаксіс
селектар {
transition-delay: час у s або ms;
}
Значэнні
| Значэнне | Апісанне |
|---|---|
s |
Задае час у секундах (напрыклад 3s).
Можна задаваць дробавыя значэнні,
напрыклад, 0.5s - паўсекунды.
|
ms |
Задае час у мілісекундах (напрыклад 3ms).
Адна секунда - гэта 1000 мілісекунд.
|
Значэнне па змаўчанні: 0s.
Прыклад
Навядзіце мышкай на блок - 3 секунды
нічога не будзе адбывацца (стаіць затрымка
3s), а потым ён плаўна зменіць сваю шырыню
за 2 секунды. Калі потым прыбраць мыш
- то зноў 3 секунды нічога не будзе
адбывацца, а потым шырыня плаўна памяншаецца
да першапачатковага значэння:
<div id="elem"></div>
#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
секунды (час змены шырыні). Калі прыбраць
мыш - то змены адбудуцца ў адваротным
парадку: спачатку памяншаецца шырыня, а потым
памяншаецца вышыня:
<div id="elem"></div>
#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;
}
:
Глядзіце таксама
-
уласцівасць
transition-property,
якое задае імя ўласцівасці для плаўнага пераходу -
уласцівасць
transition-duration,
якое задае працягласць плаўнага пераходу -
уласцівасць
transition-timing-function,
якое задае часовую функцыю для плаўнага пераходу -
уласцівасць
transition,
якое з'яўляецца скарачэннем для плаўнага пераходу -
уласцівасць
animation,
з дапамогай якога можна зрабіць анімацыю