Wartość all jest domyślną wartością właściwości transition-property.
Domyślnie wszystkie właściwości CSS, które mogą ulec procesowi animacji, mogą brać udział w efekcie przejścia elementu HTML.
transition-property:all;
Zarówno właściwość "width", jak i właściwość "color", jak i właściwość "background-color" mogą brać udział w efekcie przejścia przykładowego elementu "div".
<!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;
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ą wartości none właściwości transition-property możemy sprawić, że żadna właściwość CSS nie będzie mogła brać udziału w efekcie przejścia interesującego nas elementu HTML.
transition-property:none;
Żadna właściwość CSS nie może brać udziału w efekcie przejścia przykładowego elementu "div", ponieważ do wspomnianego elementu "div" została dodana właściwość "transition-property" wraz z wartością "none".
<!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:none;
transition-duration: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>
Za pomocą właściwości transition-property oraz nazwy istniejącej właściwości CSS możemy określić, która właściwość CSS może brać udział w efekcie przejścia interesującego nas elementu HTML.
transition-property:width;
Tylko właściwość "width" może brać udział w efekcie przejścia przykładowego elementu "div", ponieważ do wspomnianego elementu "div" została dodana właściwość "transition-property" wraz z wartością "width".
<!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;
transition-duration: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>
Za pomocą właściwości transition-property oraz sekwencji kilku oddzielonych od siebie znakiem przecinka nazw istniejących właściwości CSS możemy określić, które właściwości CSS mogą brać udział w efekcie przejścia interesującego nas elementu HTML.
transition-property:color, background-color;
Tylko właściwość "color" oraz właściwość "background-color" mogą brać udział w efekcie przejścia przykładowego elementu "div", ponieważ do wspomnianego elementu "div" została dodana właściwość "transition-property" wraz z następującą sekwencją wartości: "color, background-color".
<!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:color, background-color;
transition-duration: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>
