Top 3 Animation Features in Chrome Developer Tools

Google Chrome has quickly become the choice for lots of people. From the grandma watching videos of her grandchildren to the developers building single page applications, Google has built an elegant and powerful browser for all. Besides the ease of use and speed, Google Chrome comes loaded with features for designers and developers. There are many articles showcasing these features. Although, we’ll cover a few of the animation ones we love at Fuseboard.

Activate State Animations

Whether a button, link or input, it’s important to illustrate current state to users. A change in state without a transition animation can be a bit abrupt and disorienting. Using CSS3 animations, you can easily transition color, size or just about any CSS property. In our example, we transition using 3D rotations. Not exactly a real world example, but it showcases what’s possible.

Inside of Chrome Dev Tools, select the target element and click the ‘Show element states’ button to toggle the element’s different states. You can preview the transition and best of all edit the current state’s properties. Once you nail the right properties, copy and paste into your CSS style.

Slooooow Moootion

At Fuseboard, we just recently discovered this one, but it’s such a time saver. No more constant changes the CSS timing to slow the pace. Now, just click the ‘Show Animations’ button and slide to the desired speed. You can even pause the animation at different points.

Time Your Transitions

Once you’ve set up the transitions from one property to another. For example, moving an element from left to right using the ‘left’ CSS property. By default, the transition is linear — though a little boring. In Chrome’s Developer Tools, select the target element. Now you can effortlessly pick from some cool browser defaults or tweak timing for more awesomeness! Once you get the right timing, copy and paste the property to your CSS style.

Summary

Animation when used right, brings lots of delight and usability to your experiences. Use the Chrome Developer Tools to save yourself time and gain more focus on building awesome!

Resources

Mozilla Developer Network — Using CSS animations
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

Animate.css — Just-add-water CSS animations
https://daneden.github.io/animate.css/

WOW.js — Reveal animations when you scroll.
http://mynameismatthieu.com/WOW/

Bounce.js — a tool and JS library that lets you create beautiful CSS3 powered animations.
http://bouncejs.com/