In the previous post I've briefly introduced CSS3 transitions. Now it's time to build an interesting example after knowing the basics. Let's say that we have a navigation menu and we want to apply some transition effect when a user hovers a link with the mouse. The effect should smoothly change the text color and the background color of each link. Here's the code:
#navigation {
width: 60%;
margin: 0 auto;
height: 4em;
background: #666;
color: #fff;
border-radius: 12px;
padding: 0;
list-style: none;
}
#navigation > li {
height: 100%;
float: left;
margin-right: 0.5em;
}
#navigation > li > a {
font-size: 1.2em;
text-transform: uppercase;
color: #fff;
text-decoration: none;
height: 100%;
float: left;
padding: 0 1em;
line-height: 3.2em;
-moz-transition: background 2s ease, color 2s ease;
-webkit-transition: background 2s ease, color 2s ease;
-o-transition: background 2s ease, color 2s ease;
transition: background 2s ease, color 2s ease;
border-radius: 12px;
}
#navigation > li > a:hover {
background: #000;
border-radius: 12px;
color: #f60;
}
The final effect is that of a gradual color transition. You can see the result below.