Za pomocą właściwości transition-delay oraz dowolnej liczby wraz z wybraną jednostką czasu możemy opóźnić lub przyspieszyć w czasie wykonywanie się efektu przejścia interesującego nas elementu HTML.
transition-delay:1s;
Wykonywanie się efektu przejścia przykładowego elementu "div" jest opóźnione w czasie o 1 sekundę, ponieważ do wspomnianego elementu "div" została dodana właściwość "transition-delay" wraz z wartością "1s".
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
transition-duration:2s;
transition-delay:1s;
font-size:1.3em;
padding:1em;
min-height:80px;
width:40%;
color:#000;
background-color:#7DCDE8;
}
div:hover {
width:90%;
color:#FFF;
background-color:#F00;
}
</style>
</head>
<body>
<div>najedź na mnie kursorem myszy</div>
</body>
</html>
Jeżeli zdecydowaliśmy się na to, aby dokładnie określić, które właściwości CSS mogą brać udział w efekcie przejścia interesującego nas elementu HTML, wtedy za pomocą sekwencji kilku oddzielonych od siebie znakiem przecinka wartości należących do właściwości transition-delay możemy określić osobny czas trwania opóźnienia lub osobny czas trwania przyspieszenia wykonywania się efektu przejścia dla każdej podanej przez nas właściwości CSS mogącej brać udział w efekcie przejścia interesującego nas elementu HTML.
Podana przez nas sekwencja wartości właściwości "transition-delay" nie może zawierać wartości globalnych.
Jeżeli podana przez nas sekwencja wartości właściwości "transition-delay" będzie zawierała mniejszą liczbę wartości niż liczba właściwości CSS mogących brać udział w efekcie przejścia elementu HTML, wtedy przeglądarka internetowa powtórzy podaną przez nas sekwencję wartości właściwości "transition-delay" tak, aby uzyskać wystarczającą liczbę wartości.
transition-delay:1s, 3s;
Dokonywanie się zmiany wartości właściwości "width" biorącej udział w efekcie przejścia przykładowego elementu "div" zostało opóźnione w czasie o 1 sekundę, natomiast dokonywanie się zmiany wartości właściwości "background-color" biorącej udział w efekcie przejścia przykładowego elementu "div" zostało opóźnione w czasie o 3 sekundy, ponieważ do wspomnianego elementu "div" została dodana właściwość "transition-delay" wraz z następującą sekwencją wartości: "1s, 3s".
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
transition-property:width, background-color;
transition-duration:2s;
transition-delay:1s, 3s;
font-size:1.3em;
padding:1em;
min-height:80px;
width:40%;
color:#000;
background-color:#7DCDE8;
}
div:hover {
width:90%;
color:#FFF;
background-color:#F00;
}
</style>
</head>
<body>
<div>najedź na mnie kursorem myszy</div>
</body>
</html>
