Be smart, be subtle

Like all shiny new tools, it’s important to use transitions appropriately. One can easily go overboard adding transitions to everything on the page, resulting in some sort of annoying, pulsating monster. It’s key to decide where transitions rightfully enrich the user experience and when they are just extraneous noise. Additionally, making sure the speed of the transition doesn’t slow down an otherwise snappy action from the user is crucial. Use with care and caution.

For more thoughts on appropriate speeds for CSS transitions and animations, see Trent Walton’s post on the subject: http://bkaprt.com/css3/7/.⁸

Now that we have a solid base knowledge of how CSS transitions work at a technical level, we can use them to smooth out the experience layer in the examples that follow, beginning with the very next chapter. Let’s get to it.