Welcome to GeebArt - The Front-End of Technology and Interactive Experiences

Easy CSS3 Transitions Tutorial

By: Geeb
On: December 21, 2011

Want to know how to animate elements CSS3 Transitions? Better yet, want the Easy CSS3 Transitions Tutorial? You are in the right place. After reading and doing some self exploration my Easy CSS3 Transitions Guide will allow you to create CSS3 transitions like a boss. This tutorial will explore link animations, the :hover pseudo link state, browser compatibility, and my CSS3 catch all. Without further ado, I give you the Easy CSS3 Transitions Tutorial!

Explaining CSS3 Transitions

The best way to explain how CSS3 Transitions work, is to think about its application towards link interaction, yes, the basic “a” tag. A link usually has a static or starting state by default, and also has an active or :hover state. The CSS selectors usually look something like…
#content a.transTest{background-color:#000;}
#content a.transTest:hover{background-color:#fff;}

In this example, as the user hovers over the link it will turn from black to white (this is something CSS3 Transitions can help us with.) Interaction like this always has a sudden on/off appearance. This is not very humanistic to say the least, but it has been the web standard for a long time. So, what if we could smoothly transition (CSS3 Transitions) from the link’s static state to its active state? Or, in other words, from the default to the hover state? Fortunately, CSS3 transitions make this possible.

Making CSS3 Transitions

css3Transitions Easy CSS3 Transitions Tutorial
Before I give you all of the source code, I am going to make a button first. To do this, I am going to think about how I want the button to look at the start and then as someone hovers. Grab the styles below to test it out on your own. You will notice that not only will I be using CSS3 Transitions, but also some new CSS3 properties to style my buttons. Remember, since these are CSS3 Transitions, some of these styles will NOT work in older browsers. Anything before IE9 will not work at all and IE9 only support some CSS3 properties.
#content a.noTrans{
text-decoration: none;
background-color: #444;
padding: 5px 10px;
color: #CCC;
border: 1px solid #222;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 0px 4px #222;
-moz-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
#content a.noTrans:hover{
background-color: #222;
padding: 5px 10px;
color: #fff;
border: 1px solid #000;
-webkit-box-shadow: 0px 0px 7px #000;
-moz-box-shadow: 0px 0px 7px #000;
box-shadow: 0px 0px 7px #000;
}

The simple code (with no transitions) looks like this…

CSS Button

Adding the CSS3 Transitions “Catch-All”

Add this section of your code to the static state style declaration for the link.
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-ms-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;

The Finale!

The code with CSS3 transitions looks like this…

CSS Button

This code accounts for all browsers that support CSS3 transitions and will transition all styles being declared during the :hover state. If you wanted to transition a particular style, replace “all” with the desired target, e.g., “width”, “color”, “background-color”, “font-size”. The only condition here is that you must use properties that have numerical values. So, you could not transition from display:none; to display:block;, but you could transition from opacity:0; to opacity:1;

Hope it helps. Feel free to post comments and questions below! CSS3 transitions FTW!

css3Transitions.css
css3Transitions.html

For more information on CSS3 transitions, visit the link below,

css3.bradshawenterprises.com

Categorized:

Tagged: