What are CSS3 Transitions?
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.
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.
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.
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.
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.
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.
transition: background-color 3s linear 1s;
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.
As with most CSS3 properties, modern browsers are the only ones capable of displaying transitions. Here’s the list of supported browsers:
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.