CSS Transition property
CSS
transition property is used for the transitioning one value to another
value. It’s using tor the smooth effect. As we have taken any elements
and we define height value 50px and use hover CSS pseudo-class effect
without transition. It will react height 200px when hover over then it
will show the jerking effect and convert element height 200px.
When use transition property in the element then we will get smoothly effect with an element.
CSS Transition Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Dropdown</title>
<style>
* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
.anythingDropDown {
margin: 50px auto;
max-width: 600px;
}
.anythingDropDown ul {
list-style: none;
}
.anythingDropDown li {
float: left;
}
.anythingDropDown ul li a {
display: block;
padding: 5px 10px;
color: #fff;
background: #0bf;
border-radius: 3px;
text-decoration: none;
margin-right: 5px;
font-family: Arial, Helvetica, sans-serif;
transition: all 1s;
}
.anythingDropDown ul li a:hover {
background: #0b6;
border-radius: 3px;
transition: all 1s;
}
.mainBoxTransition {
width: 600px;
height: 50px;
border: 1px solid #ccc;
background: #eee;
margin: 10px auto;
transition: all 1s;
text-align: center;
padding: 30px 10px;
}
.mainBoxTransition:hover {
height: 200px;
transition: all 1s;
}
.withoutTransition {
width: 600px;
height: 50px;
border: 1px solid #ccc;
background: #eee;
margin: 10px auto;
text-align: center;
padding: 30px 10px;
}
.withoutTransition:hover {
height: 200px;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="anythingDropDown">
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">Jquery</a></li>
</ul>
</div>
<div class="clear"></div>
<h1 style="margin-top:50px">CSS Transition Example:</h1>
<div class="mainBoxTransition">CSS Transition Text</div>
<h2 style="margin-top:50px">CSS without transition Example:</h2>
<div class="withoutTransition">CSS Transition Text</div>
</body>
</html>
No comments:
Note: Only a member of this blog may post a comment.