Transition:-
Transitions allows you to change property values smoothly from one value to another, over a given duration. To create a transition effect, you must specify two things, the CSS property you want to add an effect to and the duration of the effect.If the duration part is not specified, the transition will have no effect, because the default value is 0.
EXAMPLE:-
<html>
<head>
<style>
#a {
width: 100px;
height: 100px;
background: steelblue;
-webkit-transition: width 2s;
transition: width 2s;
}
#a:hover {
width: 400px;
}
#b {
width: 100px;
height: 100px;
background: turquoise;
-webkit-transition: width 2s,
height 2s, -webkit-transform 2s;
transition: width 2s, height 2s,
transform 2s;
}
#b:hover {
width: 300px;
height: 300px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
</style>
</head>
<body>
<h3> Transition </h3>
<div id ="a">
</div>
<p>Hover over the div element above,
to see the transition effect.</p>
<div id ="b">
</div>
</body>
</html>
OUTPUT:-
No comments:
Post a Comment