May 5, 2016

Fine Tuning CSS Transitions Directly in Chrome

There are many great things about using an evergreen browser such as Chrome or Firefox. One of my personal favorite things to do after Chrome gets updated is to open up DevTools and poke around to see if there are any great new tools I can use.

A relatively recent addition to the DevTools is the CSS animation easing editor (animation-timing-function property). This makes it easy to drop a simple transition into a CSS animation then tweak it in the browser to get a result that you want. After you're done editing in the browser you can just copy the CSS and drop it in place in your local file.

In many instances a nicely tuned transition can really add a nice level of polish to a design that you just don't get with a basic ease-in transition. Keep in mind you still want to keep things simple and use the transitions sparingly throughout a site; going overboard can cause distractions and has the additional drawback of bogging down some older mobile devices.

One additional tip for fine-tuning these animations is to slow them down about 2-3 times so you can see the transition in detail. When you get something you like run it at normal speed to make sure it still works.

Below is an example of a custom cubic bezier transition, a simple linear transition and an ease-in transition. The first example is slowed down 3x, the second example shows the full speed animation. The differences are subtle, but when designing interactions for users it's the small touches that can make an interaction go from just "meh" to enjoyable and memorable

Editing the transition in the browser couldn't be any easier.

By leveraging all of the tools available to us today we can streamline our workflow and make adding these microinteractions a seamless part of our process. This is just one example of the power of Chrome DevTools in helping developers make the most of our time and the technology we are given access to.

To see more of what Chrome DevTools has to offer visit the official docs. If you want to have bleeding edge development features at your disposal, consider installing Chrome Canary


By: Aaron Thompkins

UI Developer