Back to post: CSS Transitions: A Simple Way To Delight Your Visitors

CSS3 Transition Example

No transitions

In the navigation bar below the menu items change background and text color on hover without any transition applied.

• Home
• About
• Services
• Blog
• Contact

html:
<ul>
  <li><a href="">Home</a></li>
  <li><a href="">About</a></li>
  <li><a href="">Services</a></li>
  <li><a href="">Blog</a></li>
  <li><a href="">Contact</a></li>
</ul>

css:
ul {
  list-style: none;
  border-radius: 8px;
  border: 1px solid #eee;
  overflow: hidden;
  padding: 0;
}

ul a {
  float: left;
  text-decoration: none; 
  padding: 5px 30px;
  background: #777;
  border-right: 1px solid #999;
  border-left: 1px solid #555;
  color: #fff;
}

ul a:hover {
  background: #dfdfdc;
  color:#222;
  border-color: #ccc
}

Transitions

The navigation bar below is exactly the same as the one above, with the exception that a simple transition that has been applied.

• Home
• About
• Services
• Blog
• Contact

Note: Vendor prefixes have not been shown in the code below, but they are necessary to make transitions work in current browsers.

Unfortunately the transition won't work in IE9 or below, but it should work in all other major browsers. Transitions are coming to IE in version 10.

<ul id="transition">
  list items…
</ul>

ul#transition a {
  transition-property: all;
  transition-duration: 0.5s;
  transition-timing-function: ease;
  transition-delay: 0.01s;
}