article

Thursday, June 30, 2011

CSS3 Transition

CSS3 Transition

Use CSS 3 transition to give action to elements in your website, such as change in colour, motion and more!




//CSS
<style>
.my_class {
transition: transform .5s ease-in;
-moz-transition: -moz-transform .5s ease-in;
-o-transition: -o-transform .5s ease-in;
-webkit-transition: -webkit-transform .5s ease-in;
}
.my_class:hover {
transform: rotate(7deg);
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
}
</style>
//HTML
<p><a class="my_class" href="#">Mouse over this example paragraph to <br/>see it rotate 7degrees using a transform transition.</a></p>

Related Post