Front-End Web Development: The Big Nerd Ranch Guide

State Changes with CSS Transitions

CSS transitions create a gradual change from one visual state to another, which is just what you need to make Ottergram’s show/hide effect more polished.

When you create a CSS transition, you are telling the browser, “I would like this element’s styles to change to these new properties, and I would like for that change to take exactly as long as I tell you.”

One common example is the fly-out menu seen on many sites, such as the small-screen version of bignerdranch.com. In a browser with a narrow viewport, clicking the menu icon makes the navigation menu appear from the top – but it does not appear all at once. Instead, it slides down from the header, visually animating from the initial state (hidden) ...