CSS Transition

When we put cursor on box it's effect happens
CSS Transition


CSS Transitions
By using CSS transitions we can change any property with smoothly over a timing duration.
Properties of CSS transitions:-
1.     transition
2.     transition-delay
3.     transition-duration
4.     transition-property
5.     transition-timing-function

Let's have an example
<!DOCTYPE html>
<html>
<head>
<style>
.a
{
 width: 100px;
 height: 100px;
 background: red;
 transition: width 2s, height 4s;
}
.a:hover
{
 width: 300px;
 height: 300px;
}
</style>
</head>
<body>
<div class="a"></div>
</body>
</html>

Comments

Popular Posts