Example 1: CSS3 Transitions

A good place to start with CSS3 visual effects is transitioning a basic CSS property like color, background-color, or border on hover. To kick it off, let’s take a link color CSS property and connect it to a .4 second transition.

Start with a basic unordered list for a navigation system:



	
		Page Title
		
	




Start with your link CSS, including the hover state:

a { color: #e83119; }
a:hover { color:#0a99ae; }

Now, bring in the CSS3 to set and define which property you’re transitioning, duration of transition and how that transition will proceed over time. In this case we’re setting the color property to fade over .4 seconds with an ease-out timing effect, where the pace of the transition starts off quickly and slows as time runs out. To learn more about timing, check out the Surfin’ Safari Blog post on CSS animations. I prefer ease-out most of the time simply because it yields a more immediate transition, giving users a more immediate cue that something is changing.

a {
  -webkit-transition-property: color;
  -webkit-transition-duration:.4s;
  -webkit-transition-timing:ease-out;
}

You can also combine these into a single CSS property by declaring the property, duration, and timing function in that order:

a { -webkit-transition: color .4s ease-out; }

The final product should be a red text link that subtly transitions to blue when users hover with their mouse pointer. This basic transitioning technique can be connected to an infinite amount of properties. Next, let’s create a menu bar hover effect where border-thickness is combined with a .3 second transition.

To start, we’ll set a series of navigation links with a 3 pixel bottom border,
and a 50 pixel border on hover:

#nav a { border-bottom: 3px solid #e83119 }
#nav a:hover { border-bottom: 50px solid #e83119 }

To bring the transition into the mix, let’s set a transition to gradually extend the border thickness over .3 seconds in a single line of CSS:

#nav a { -webkit-transition: border .3s easeout;
}

(excerpt from Trent Walton’s Connecting The Dots Article)


Posted

in

by

Tags:

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *