Hello Readers
This blog will describe about, what is transition property in CSS3.
transition property
The transition property specifies the name of the CSS property, the transition effect starts when the specified CSS property changes). CSS3 transitions allows to change property values smoothly (from one value to another), over a given duration.
Here is an simple example for css3 transition.
Here is the HTML
<div class="container">
<img src="3.png" alt="" class="image">
</div>
Here is the CSS
*{
padding: 0px;
margin: 0px;
}
.container {
overflow:hidden;
width:400px;
height:300px;
margin: 10px auto;
}
.image {
-webkit-transform:scale(1.1);
transform:scale(1.1);
}
.container:hover .image {
-webkit-transform:scale(1.5);
transform:scale(1.5);
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
0 Comment(s)