CSS - właściwości transition-delay transition-duration transition-property
transition-delay transition-duration transition-property
| 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: 200px;
height: 100px;
padding: 15px 30px;
background: Lavender;
border: 5px solid Red;
transition-property: width;
transition-duration: 5s;
transition-delay: 0.5s;
}
div:hover{
width: 400px;
background: yellow;
border-color: MediumPurple;
}
p {
width: 200px;
height: 100px;
font-size: 20px;
font-weight: bold;
padding: 15px 30px;
background: Lavender;
border: 5px solid SkyBlue;
transition-property: height, background;
transition-duration: 1s;
transition-delay: 2s;
}
p:hover {
height: 400px;
background: orange;
border-color: MediumPurple;
}
</style>
</head>
<body>
<div class="one">Umieść mysz na mnie<br />czas trwania: 5s<br />start efektu: 0.5s</div>
<p type="button">Umieść mysz na mnie<br />czas trwania: 1s<br />start efektu: 2s</p>
</body>
</html>
|
|