The Passage of an act from one state to another is called Transition.Now create a Web page named transitioneffects.html to learn to use the transition feature of CSS.
<!doctype html>
<head>
<title>Transition effects</title>
<style type="text/css">
div{
background:url(nature1.jpg);
}
.area{
border-bottom:6px solid green;
height:500px;
position:relative;
}
.item{
background:red;
color:white;
margin:0 20px;
height:30px;
line-height:30px;
position:absolute;
text-align:center;
width:90px;
height:90px;
opacity:0.9;
}
.area.item{
-webkit-transition:all 1s linear;
}
.area.item-1{
bottom:10px;
-webkit-transition-duration:1.0s;
}
.area.item-2{
bottom:110px;
-webkit-transition-duration:.75s;
}
.area.item-3{
bottom:220px;
-webkit-transition-duration:.5s;
}
.area.item-4{
bottom:330px;
-webkit-transition-duration:.25s;
}
.item:hover,
.item:focus{
color:white;
width:400px;
opacity:0.6;
}
</style>
</head>
<body>
<DIV class="area">
<h1>Working With the Transition effects</h1>
<DIV class="item item-1">1.0 second</DIV><br>
<DIV class="item item-2">0.75 second</DIV><br>
<DIV class="item item-3">0.5 second</DIV><br>
<DIV class="item item-4">0.25 second</DIV><br>
</DIV>
</body>
</html>
Here we have applied the transition effects on different DIV elements.
The output of the above file:
Now when we move your mouse pointer on any of the red block it expanding towards the right side as shown in below output:
<!doctype html>
<head>
<title>Transition effects</title>
<style type="text/css">
div{
background:url(nature1.jpg);
}
.area{
border-bottom:6px solid green;
height:500px;
position:relative;
}
.item{
background:red;
color:white;
margin:0 20px;
height:30px;
line-height:30px;
position:absolute;
text-align:center;
width:90px;
height:90px;
opacity:0.9;
}
.area.item{
-webkit-transition:all 1s linear;
}
.area.item-1{
bottom:10px;
-webkit-transition-duration:1.0s;
}
.area.item-2{
bottom:110px;
-webkit-transition-duration:.75s;
}
.area.item-3{
bottom:220px;
-webkit-transition-duration:.5s;
}
.area.item-4{
bottom:330px;
-webkit-transition-duration:.25s;
}
.item:hover,
.item:focus{
color:white;
width:400px;
opacity:0.6;
}
</style>
</head>
<body>
<DIV class="area">
<h1>Working With the Transition effects</h1>
<DIV class="item item-1">1.0 second</DIV><br>
<DIV class="item item-2">0.75 second</DIV><br>
<DIV class="item item-3">0.5 second</DIV><br>
<DIV class="item item-4">0.25 second</DIV><br>
</DIV>
</body>
</html>
Here we have applied the transition effects on different DIV elements.
The output of the above file:
Now when we move your mouse pointer on any of the red block it expanding towards the right side as shown in below output:
No comments:
Post a Comment