CSS - właściwości transition-timing-function
transition-timing-function
| kod |
wynik kodu |
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<meta http-equiv="Content-Language" content="pl">
<title>CSS - Transition</title>
<link rel="Stylesheet" type="text/css" href="style.css" />
<style type="text/css">
div { width: 250px;
font-size: 20px;
font-weight: bold;
padding: 15px 30px;
background: Lavender;
border: 5px solid Red;
transition-property: background, border;
transition-duration: 5s;
transition-delay: 0.5s;
}
.one {
transition-timing-function: linear;
}
.two {
transition-timing-function: ease;
}
.three {
transition-timing-function: ease-in;
}
.four {
transition-timing-function: ease-out;
}
.five {
transition-timing-function: ease-in-out;
}
.six {
transition-timing-function: cubic-bezier(1,1,1,1);
}
div:hover{
background: yellow;
border-color: MediumPurple;
</style>
</head>
<body>
<div class="one">Umieść mysz na mnie</div>
<div class="two">Umieść mysz na mnie</div>
<div class="three">Umieść mysz na mnie</div>
<div class="four">Umieść mysz na mnie</div>
<div class="five">Umieść mysz na mnie</div>
<div class="six">Umieść mysz na mnie</div>
</body>
</html>
|
|