Transitions & Animations in CSS3

CSS 3 – Transitions & Animations
Transition properties allow elements to change values or behavior after a specified time, animating the property changes, rather than having them occur immediately. Just like when the mouse over to a menu item then it change color, background immediate. Now the same things will happen after a specific duration in seconds. Example

Hello User … place mouse here…

Here you will notice that the background color of the given div will take time of 5 seconds to change from red to green completely. For compatibility in all supporting browsers, vendor prefixes are required: -webkit-transition, -moz-transition, -o-transition, -ms-transition
Example 2

Transitions in CSS3

See how transition take effects on mouse over by speed 5seconds

Transition Timing The transition-timing-function property is used to set the speed in which a transition will move. A transition can have multiple speeds within a single duration. Few known properties are linear, ease-in, ease-out, and ease-in-out.

 For More Details  You may buy our book written by Hirdesh Bhardwaj from

Leave a Reply

Your email address will not be published.

Enjoy the tutorial? Please spread the word :)

Follow by Email