One of the more exciting features included in CSS3 is the transition property. This property gives you the ability to create smooth transitional animations using css selectors and their properties. Traditional animation were handled by using Javascript or javascript libraries like Jquery. Gone are the days of learning a whole new language to add visual effects and animations to your web designs!

CSS3 Transition Syntax

In the syntax example above, you may have noticed two things: 1) there are multiple prefixes (like -webkit- and -moz-) tied to the transition property and 2) one of the div selectors has a pseudo class after it. These two things are necessary to control and operate the transition animation. While this may seem overwhelming at first, the application and use is very easy when you think about it in a simple way. Just like traditional animation, there is a starting point and an ending point that tells the animation where to begin, where its going, and where to end. CSS3 applied the same idea here. DIV selector is the starting point with a width and height of 50px, the transition properties inside tell the div how long it takes to animate, and div:hover tells the animation where to stop. Since CSS3 is a relatively new practice compared to older browsers, we must specify the transition for each browser. That is where the -webkit-, -moz-, -o- prefixes come into play. They help distinguish specific browsers what the new property is.

Pseudo Classes

Before we go any further and start coding, let’s talk about Pseudo Classes. Pseudo classes are not really classes, they are “fake” classes (hence where the word pseudo comes from). There are over 25 different types of pseudo classes and each one adds a special effect to a selector or class you created. In this case, we used the :hover Pseudo class to tell the web browser “Hey Browser, when the selector DIV is hovered, change it’s properties from 50px to 100px”. This is very similar to how an Anchor Tag (<a>) behaves when a link is hovered on.

Practicing the Code

Now that we are familiar with principals of the transition property lets try it out. We are going to make five colored boxes. When we hover our mouse over them, they will animate and move up to create a nice visual effect.

Step 1

Start by setting up your document and placing the <style> tag in the <head> element. Go ahead and make a <div> with an id of Container. Inside the container, place five more <div> with different id like red, green, blue, yellow, black.

Step 2

Inside the <style> tag, we will be placing our css to style our html. It is good practice to put multiple selectors together if they are using the same properties. It helps reduce file size and optimizes your websites performance. Look at lines 10-16 as an example.

You should now have something similar to the example below.

hover-tut-step-3

Step 4

Now it is time to add the animation. We will update our CSS to add more styles to the colored ID Divs, followed by adding the :hover pseudo class to indicate that hovering will trigger animation.

You should now get the animated effect much like the image below. And you’re done!!!!

hover-tut-step-4

Wrapping It Up

It is important to not that this is only a fundamental exercise and that transitions can bring so much more than just bumping divs up a couple of pixels. By simply changing the width and the height in our example code, you can make a scaling effect to your objects. Want to get creative? Try combining different properties like transform:rotate with transitions to get even cooler effects!

Download Source Files