Exploring CSS3 Transitions and Animations with Examples – Part 1

With the birth of Cascading Style Sheets level 3, many new properties came into existence for the first time, out of which Animations and Transitions are the two that have been able to capture the attention of web designers and developers worldwide.

Before moving ahead with CSS3 Transitions and Animations, let’s define both of them to make you understand what they are actually.

CSS3 Transitions

Have you ever applied an effect on any of your web element to change its style from one to another? If yes, then that is what we call as Transition. And in CSS3 we have got a specific property to apply those effects and grab the web users’ attention. In simple words, CSS3 Transitions is a newly W3C recommended CSS3 property, which provides you a complete control over the speed of the effects applied on web elements.

For example let’s take a case of the menu bar. Generally, we see web designers apply a hover effect on the menu options to notify the users about the selected option. If you observe such an effect closely, you’ll notice that the effect gets applied instantly when a user hover his mouse over the given options. But with CSS3 Transitions in place, you can control the time that hover effect takes to apply.

CSS3 Animations

Being a web developer, you must have tried a lot of Flash animations animated images, and JavaScripts to bring an animated effect on your web elements. And that’s what CSS3 Animations is made for. Basically, Animations is a new CSS3 property which lets you apply animation effect on most of the HTML elements without using Flash, Animated Images or JavaScript.

The Progress

When W3C officially recommended both CSS3 Transitions and Animations, many browsers weren’t able to support that. But now as the time has progressed, almost all major web browsers, which include Google Chrome, Mozilla Firefox, Safari, Opera, IE 10, etc., have started to support these two awesome properties of CSS3. However, if your users view your site made using these two properties on previous versions of unsupported browsers they won’t be able to see the applied transitions and animations effect in place. That’s because unsupported browsers just ignore these codes completely. Therefore, you must make sure that your webpage doesn’t rely on these properties.

Exploring CSS3 Transitions

Like we told you above, transitions can only come into play when an element has a change or effect in state along with different styles specified for each state. You can differentiate the styles of your web elements using :hover, :active, :target and :focus pseudo classes.

Moreover, in total there are four transition properties that you can use, these includes transition-property, transition-duration, transition-timing-function, and transition-delay. Though you can use all the four transition properties to apply the effect on your HTML elements, but it’s not necessary always. Out of these four properties, developers use the first three more often.

Here’s a brief explanation of all four above mentioned properties.

• Transition Property: Here you need to specify the CSS property to which you want to apply the transition on.
• Transition Duration: With this property, you can set the time length that a transition takes. By default it is set to 0.
• Transition-Timing-Function: It defines how the speed while transition takes place is calculated. By default it calculates in ‘ease’ mode, under which the transition effect starts slowly in the beginning, then it gets fast, and at last ends at a slow speed.
• Transition-Delay: It specifies when the transition effect will start to take place. By default its value is set to 0.

Here’s a live example using the all four transition properties.

With this code, the transition will take an effect on a circular shape having a width, height, and border-radius of 100 pixels each, with a background color code #800080, which will get transformed into different color code #e03881. The transition will get completed within 5 seconds, once you hover over the shape for at least a minimum of 6 seconds as the transition effect will start with a delay of 1 second.

HTML

Vendor Prefixes

In the CSS3 code shown above, we didn’t use any vendor prefixes to make the transition effect browser compatible. We did this to present you the code in a simple and easy to understandable manner. But if you want the transition effect to work smoothly across all major browsers, namely; Google Chrome, Opera, Safari, and Mozilla Firefox, you must use the vendor prefixes given below.

Here’s the complete CSS3 Transitions code with all the required vendor prefixes for the example shown above.

So that is it for the first part of this CSS3 Transitions and Animations tutorial, we will now move to the second part, in which we will tell you more about the Transition Properties one by one, and all with the examples. Till then keep reading our other informative blog posts comprising of tutorials, reference guides, etc.CSS3 Transitions and Animations: With this tutorial, you will be able to understand the effect these two css3 properties can bring on your website.