Individuals familiar with film editing programs such as After Effects, Final Cut Pro, or iMovie have long understood the power of incorporating transitions into their films. Without transitions between camera shots, movies have the tendency of feeling fragmented and unpolished.
As such, designers were left with no clear means to incorporate animation into their websites. With the addition of CSS transitions into the CSS3 specifications, this is no longer the case.
What are CSS Transitions?
CSS Transitions provide a way to animate changes to CSS properties over time, as opposed to having changes take effect instantly. For example, if you change the color of an element from orange to blue, normally the effect is instantaneous. With CSS transitions enabled, the change occurs over an interval of time you can specify, following an acceleration curve you can customize.
The changing of a CSS value can be triggered by a mouse click, focus or active state, or any change to the element (including even a change on the element’s class attribute).
Don’t get what I’m talking about yet? Let’s look at how we would code a specific example.
Add this bit of code in to the style sheet.
And then add this to the HTML…
results in this beautiful thing.
When To Use CSS Transitions?
In his book CSS3 For Web Designers, Dan Cederholm talks about dividing the visual experience on websites into two main categories.
There are two main types of interaction that these transitions can be used for; critical and non-critical.
When dealing with critical interactions you should be very careful to still provide support for older browsers. This refers to things such as your companies branding, accessibility and detrimental page layout. If you do wish to use transitions on these things, just make sure there are supported fallbacks for older browsers.
Non-critical interactions refer to things like movement, interaction, feedback and visual rewards. These enable the users with a more modern browser to enjoy little nuances that you add to the site to help enhance the experience while keeping the overall functionality of the site the same.
Types of Transitions
There are tons of different types of transitions to use with purely CSS. Have a look at this animated table to see them all in their glorious CSS’ness.
As you can see, there are many different types of transitions that can be used on your site, and many of them can be used to achieve the same goals. Part of the importance of understanding these transitions is choosing the right one for your purpose. When choosing to use something that is more important it may benefit you to use a transition that is more widely supported than another.
This allows us to focus more on what we are tweaking and less time spent tweaking all the specific values for each browser. For a full list of browsers that support and don’t support CSS transitions, refer to the compatibility table.