CSS Media Queries
Media queries extend the functionality of media types by allowing more precise labeling of style sheets. Among the media features that can be used in media queries are 'width', 'height', and 'color'. By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself. To see the advantages of using media queries, resize your browser window by making it narrow, wide, common.
CSS Transitions
CSS Transitions enable implicit transitions, which describe how CSS
properties can be made to change smoothly from one value to another
over a given duration. Normally when the value of a CSS property
changes, the rendered result is instantly updated, with the affected
elements immediately changing from the old property value to the new
property value. CSS transitions describes a way to specify transitions
using new CSS properties. These properties are used to animate
smoothly from the old state to the new state over time.
CSS 3 Animations
CSS Animations are similar to transitions in that they change the
presentational value of CSS properties over time. The principal
difference is that while transitions trigger implicitly when
property values change, animations are explicitly executed when the
animation properties are applied. Because of this, animations
require explicit values for the properties being animated. Many
aspects of the animation can be controlled, including how many times
the animation iterates, whether or not it alternates between the
begin and end values, and whether or not the animation should be
running or paused. An animation can also delay its start time.