How To Use CSS3 Transitions

What are CSS3 Transitions?

As with many CSS3 features that have been used as of late, many of them have dealt mainly with stylizing static properties. However, with the new CSS3 transitions, you can now do some really cool transition effects for various elements.CSS3 transitions now allow you to create transition effects without the need of using JavaScript or jQuery to manipulate/animate that element. Instead, it allows your browser to render those transition effects by itself.

There are four new properties that come with the new CSS3 Transitions. They are:

transition-property
transition-duration
transition-timing-function
transition-delay

You can also use the transition property as a shorthand to tie all of them at once. But first, let’s go over the four transition properties and explain how they are used.

transition-property

The transition-property Property (yes, read that again) allows us to select which CSS property we want the transition effects to affect. Here’s some examples of using the transition-property:

transition-property: none;
transition-property: all;
transition-property: background-color;
transition-property: font-size, color, height;

As you can see, we can choose which CSS property we want to select to do various transitions to. By using the “all” property, we can select every property that can be transitioned. You can find a list of properties that can be animated here.

transition-duration

The transition-duration Property is designated to allow a certain transition to do its animation within a specified time. Here are some examples:

transition-duration: 500ms;
transition-duration: 3s;
transition-duration: 8000ms, 5000ms;
transition-duration: 0;

As you can see by the examples, you can also comma-separate them with different values which targets the specific transition-property we declare.

transition-timing-function

The transition-timing-function is really just a fancy way of determining how the transition will be done. Here are examples of all the different types of transition-timing-function:

transition-timing-function: linear;
transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: cubic-bezier(0.2, 0.4, 0.5, 0.6);

All these transition-timing-function Properties can help you determine how your transition animation will be handled. For now, I suggest you use either “linear” or “ease” as they are used for most basic animations.

transition-delay

The transition-delay Property is an optional property that allows us to delay when the transition occurs. It accepts various times in seconds or milliseconds and can also be comma-separated to determine which properties are going to be delayed. Here are some examples:

transition-delay: 2s;
transition-delay: 2000ms;
transition-delay: -2s;

As you probably would have noticed, I’ve included a -2 second delay to the last example. The transition-delay property accepts negative numbers as well which will trigger the animation to occur immediately but it will make the animation appear as though it had already begun it’s animation 2 seconds ahead and continue on from there.

transition

Now that we know all of the four various transition properties, we can now tie them all together to create a shorthand version. Here’s an example that turns the background-color of a div class called “.animate-me” from yellow to red when hovered over.
[CSS]
.transition-me {
height: 100px;
width: 100px;
background-color: #ff0;
transition: background-color 3s linear 1s;
}
.transition-me:hover {
background-color: #f00;
}

[/CSS]
The example above will animate the background color of the div to go from yellow to red in 3 seconds linearly with a 1 second delay. Try it out for yourself.

 

Browser Support

As with most CSS3 properties, modern browsers are the only ones capable of displaying transitions. Here’s the list of supported browsers:

  • Firefox 4.0+

  • Chrome 4.0+

  • IE 10+

  • Safari 3.1+

  • Opera 10.5+

 

Just remember, “with great power comes great responsibility…” so use transitions sparingly as an enhancement as opposed to a requirement. Since transitions are not fully supported on most browsers, it’s best to just use them to enhance certain features on your site.

So now that you know how to use transitions, how have you used CSS3 transitions in your website? Leave a comment below and tell me how you used it to enhance your site.

 

 

Leave a Reply

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