CSS3 Series, Part 1: Transitions

In this series, I will be focusing on CSS3 tips and techniques to enhance certain elements on your website and give users a smooth user experience. Look for future posts about other CSS3 techniques in the upcoming weeks.

Understanding transition effects
Transitions allow for more graceful and elegant transitions between elements over a specified period of time. Rather than an abrupt transition of background colors or content, transitions give website visitors an elegant and smooth experience.


The W3C offers the following clear and simple definition of transitions:

“CSS transitions allow property changes in css values to occur smoothly over a specified duration. This smoothing animates the changing of a CSS value when triggered by a mouse click, focus or active state, or any changes to the element (including even a change on the element’s class attribute).”

Transitions are supported in Firefox, Safari, Chrome and IE10. If they are not supported in a given browser, the properties will gracefully degrade allowing the transition to occur instantly. Learn more about browser support of CSS3. Many different properties can be transitioned, such as height, opacity, border-radius, font-size, padding, and many more. Here is a complete list of all possible properties.

In the two examples following,  I have chosen to focus on the background property on a button and creating a dropdown menu only using CSS3.

Example 1: Button transition

Here we have a seemingly normal button with :hover psuedo class applied:

Sample Button 1a

Below is the markup to achieve the above button:

a.button {   padding: 6px 10px;   background: #00aeef;   color: #FFF;   font-weight: bold;   text-decoration: none; } a.button:hover {   background: #0072bc; }

Next we will add the transition to the button. The markup below identifies which properties will be transitioned (background), the amount of time the transition should take to complete (duration), and the speed curve of the transition effect (ease, linear, or cubic-bezier).

a.button {   padding: 6px 10px;   background: #00aeef;   -webkit-transition-property:  background;   -webkit-transition-duration: 0.3s;   -webkit-transition-timing-function: ease; } a.button:hover {   background: #0072bc; }

Sample Button 1b

Figure 2: The button with a transition effect applied.

As you can see with the button above, adding a simple transition creates a richer experience to any element on a website.

Example 2: Pure CSS3 Menu using transitions and opacity

The dropdown menu below is created by using only CSS3. The nested elements are hidden by setting the opacity to 0. When the parent is hovered, the nested elements become visible and slide down. In order to show the nested ul, we set the opacity to 1 and altered the top offset to display it properly. Additionally, a transition effect was added to make for a smooth interaction between background colors and opacity.
Things to keep in mind when using transitions
Having too many transitions on a website can be overwhelming and distracting, therefor consider a few enhancements that will enriched your user experience, rather than detract from it. Additionally, it is important to consider a transition timing that is appropriate for the user’s interaction and the intended outcome.

Remember:

• Always included vendor prefixes
• Always include the non-prefix property last
• Keep it simple
• Stay up to date with browser updates
• Don’t forgot mobile

Additional tools and tutorials

• CSS Generator: This tool allows you to choose from different styles and properties for your transition and generates the markup for you.
• CSS3 Transition Tutorial: This article offers several tutorials on various ways to use transitions.
• Going Nuts with Transitions: This article gives you more examples and tutorials on ways you can implement these CSS3 Transitions. 
• Responsive Design and CSS3 Transitions: A great article with examples of how to make your site responsive with the transition property.