Transitions

Setting a transition time (in seconds) allows changes between two states to occur gradually. The example below demonstrates a transition time using the :hover pseudo-class to initiate a change between states.

Keep in mind that not all CSS properties are fully animatable with transitions. For example, the last button in the example below attempts to transition using visibility: hidden, but the button appears and disappears inconsistently without a fade animation.

See the Pen CSS Transitions (IMS322 Docs) by Eric Sheffield (@ersheff) on CodePen.