CSS Transitions
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Transitions </title>
</head>
<style>
div {
margin: auto;
margin-bottom: 10px;
width: 100px;
height: 100px;
background-color: cornflowerblue;
transition:height 4s, width 2s, background-color 3s,font-size 2s ,transform 2s;
}
#normal:hover{
width: 300px;
color: white;
font-size: 2em;
background-color: turquoise;
transition-timing-function: ease; /*ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default) */
}
#several:hover{
width: 300px;
height: 300px;
color: white;
font-size: 2em;
background-color: turquoise;
transition-timing-function: linear; /*linear - specifies a transition effect with the same speed from start to end*/
}
#delay:hover{
width: 300px;
height: 300px;
color: white;
font-size: 2em;
background-color: turquoise;
transition-timing-function: ease-in; /*linear - specifies a transition effect with the same speed from start to end*/
transition-delay: 1s;
}
#transform:hover{
width: 300px;
transform: skewX(-70deg);
height: 250px;
color: white;
/* font-size: 2em; */
background-color: turquoise;
transition-timing-function: ease-in; /*linear - specifies a transition effect with the same speed from start to end*/
transition-delay: 1s;
}
#shorthand:hover{
width: 300px;
transform: scale(2,2);
height: 250px;
color: white;
/* font-size: 2em; */
background-color: turquoise;
transition-timing-function: ease-in; /*linear - specifies a transition effect with the same speed from start to end*/
transition-delay: 1s;
}
</style>
<body>
<div id="normal">First example just width transition </div>
<div id="several">Change Several Property both width and height</div>
<div id="delay">Delay the Transition Effect</div>
<div id="transform">Transition + Transformation</div>
<div id="shorthand">transition is the shorthand for the 4 transition properties : <br>1.transition property :width, height etc. <br> 2.transition duration in seconds<br> 3.transition-timing-function eg:ease, linear etc<br> 4.transition-delay in seconds</div>
</body>
</html>
No comments:
Post a Comment