Za pomocą właściwości transition oraz z góry zdefiniowanej grupy wartości możemy określić kilka różnych cech efektu przejścia interesującego nas elementu HTML.
/* OBIE REGUŁY CSS SĄ SOBIE RÓWNOZNACZNE */
/* REGUŁA - 1 */
div {
transition:width 2s linear 1s;
}
/* REGUŁA - 2 */
div {
transition-property:width;
transition-duration:2s;
transition-timing-function:linear;
transition-delay:1s;
}
- property
-
Składnik property nie jest wymaganym składnikiem grupy wartości właściwości transition. Składnik property określa wartość właściwości transition-property, czyli to, które właściwości CSS mogą brać udział w efekcie przejścia interesującego nas elementu HTML.
- duration
-
Składnik duration nie jest wymaganym składnikiem grupy wartości właściwości transition. Składnik duration określa wartość właściwości transition-duration, czyli czas trwania wykonywania się efektu przejścia interesującego nas elementu HTML.
- timing-function
-
Składnik timing-function nie jest wymaganym składnikiem grupy wartości właściwości transition. Składnik timing-function określa wartość właściwości transition-timing-function, czyli tempo wykonywania się efektu przejścia interesującego nas elementu HTML.
- delay
-
Składnik delay nie jest wymaganym składnikiem grupy wartości właściwości transition. Składnik delay określa wartość właściwości transition-delay, czyli opóźnienie lub przyspieszenie w czasie wykonywania się efektu przejścia interesującego nas elementu HTML.
transition:all 2s linear 1s;
Każda właściwość CSS może brać udział w efekcie przejścia przykładowego elementu "div", który wykonuje się 2 sekundy, posiada tempo "linear" oraz jest opóźniony w czasie o 1 sekundę, ponieważ do wspomnianego elementu "div" została dodana właściwość "transition" wraz z następującą grupą wartości: "all 2s linear 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:all 2s linear 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>
Za pomocą sekwencji kilku oddzielonych od siebie znakiem przecinka grup wartości właściwości transition możemy określić, które właściwości CSS oraz w jaki sposób mogą brać udział w efekcie przejścia interesującego nas elementu HTML.
transition:width 1s linear, color 1s linear 1s, background-color 1s linear 2s;
W efekcie przejścia przykładowego elementu "div" mogą brać udział następujące właściwości CSS: "width", "color", "background-color", ponadto wspomniane właściwości CSS posiadają różne indywidualne cechy dotyczące efektu przejścia, ponieważ do wspomnianego elementu "div" została dodana właściwość "transition" wraz z następującą sekwencją wartości: "width 1s linear, color 1s linear 1s, background-color 1s linear 2s".
<!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:width 1s linear, color 1s linear 1s, background-color 1s linear 2s;
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>
