Working with CSS3 transition properties

CSS3 includes transition properties which helps to make certain element to change its current state to a new one in a smooth manner. We see navigation bar at the top of many website. When we hover any link we see many times the background changes  in quick time. With CSS3 transition properties we can animate this change smoothly. Let’s see how can we achieve this..

CSS3 provides us four properties-

  1. transition-property
  2. transition-duration
  3. transition-delay
  4. transition-timing-function

Since these are new properties included in CSS3, browsers support this feature with their prefixes,  for chrome we need to use -webkit- prefix with each property.

Let’s start with out HTML code for navigation.

<ul id=”navigation”>
<li><a href=”javascript:void(0)”>Home</a></li>
<li><a href=”javascript:void(0)”>About</a></li>
<li><a href=”javascript:void(0)”>Contact</a></li>
</ul>

We have three menu items in our menu bar with the id ‘navigation’. Let’s add styling for these menu items to align in one line and to have smooth transition effect on hover state.

ul#navigation {
list-style:none;
}

ul#navigation li {
float:left;
}

ul#navigation li a {
background:#006600;
display:inline-block;
padding:10px 100px;
text-decoration:none;
color:#FFF;
-webkit-transition-property:background;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function:ease;
}

ul#navigation li a:hover {
background:#00CC33;
}

In the CSS styles we are animating background color of the menu item by using transition-property. The second line -webkit-transition-duration:1s specifies that the transition will take one second to shift from old value to a new value. The third line -webkit-transition-timing-function:ease; specifies how the transition will change its speed over its duration.

Now we have to specify a hover style in which we have specified a different color. When we will roll over any of the menu item, the background color of that menu item will change from the default color to the color specified in the hover style in a smooth manner. Here is the final demo.

About the Author

Pravin Varma

Tech Lead at Calsoft

You may also like these