The Top Three Animation Features in Google Chrome Developer Tools

By October 4, 2015Uncategorised

Google Chrome is one of the hottest web browsers out there. Besides the easy to use interface and fast loading speeds, Google Chrome comes with a tonne of features for designers and developers alike. Whilst there are many articles and tutorials on this, we will cover the top 3 new addition to the developer panel

Activate State Animations

With buttons, links and inputs, it’s important to illustrate the current state to the user. A change in state without a transition animation or delay can be abrupt and ugly. Using CSS3, you can easily transition most elements including size and color. In this example, we transition using 3D rotations.

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

Slow Motion

This ones a real time saver. No more making constant changes the CSS timing to slow the speed. Just click the ‘Show Animations’ button and slide to the required speed. You can even pause the animation at different places.

Timed Transitions

Once you’ve set up the transitions from one property to another. For example, moving an element from top to bottom using the ‘top’ CSS property. By default, the transition is linear. In Chrome’s Developer Tools, select the target element. Now you can easily pick from some sweet browser defaults or customize timing for more fun! Once you get the right timing, copy and paste the property to your CSS stylesheet.

Summary

Animating can really bring your website design to the next level, and keep your users engaged longer.

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 for creating beautiful CSS3 powered animations.
http://bouncejs.com/

Leave a Reply