Skip to main content

Fun with Html 5 transitions

A very easy enhancement for html 5 is CSS3 transitions. These are extremely easy to do. A lot of the tutorials accomplish some pretty big tasks that would normally be handled with quite a bit of javascript. However, some of the things that get overlooked are some of the small, simple details. Even a nice fade effect for showing and hiding something.

What I've done here on the site is that all links transition from a white border (that you don't see) to animate an underline and color shift.

Note that the transition animation is set to animates "all" properties, employ a 0.35 second animation time, and use ease-in-out for easing.

The CSS for the normal links:

  1. * a {
  2.   color: #2c92b7;
  3.   text-decoration: none;
  4.   border-bottom: 1px solid #FFF; 
  5.   -webkit-transition: all 0.35s ease-in-out;
  6.   -moz-transition: all 0.35s ease-in-out;
  7.   -o-transition: all 0.35s ease-in-out;
  8.   -ms-transition: all 0.35s ease-in-out;	
  9.   transition: all 0.35s ease-in-out;
  10. }

The CSS for the hover links:

  1. a:hover  {
  2.   color: #258;
  3.   text-decoration: none;
  4.   border-bottom: 1px solid #258;
  5. }

Note: The current versions of Chrome (17.*) have a bug which means that transitions do not get executed for "visited" links. This has been resolved in version 18. See issue here.