CSS Transitions & Animation

In addition to setting the still visual design of website content, CSS has the ability to apply motion to that content for greater interactivity and interest. Transitions allow for smooth animation between two states, while keyframe animations are capable of creating more complex moving visuals.


Whenever CSS properties are changed between two states of an element (such as when a link is hovered), the transition property can be used to add a timed transition between those states. Only properties that exist along a continuum (such as a measurement or a color) can be transitioned. Properties with discreet values (such as display or text-decoration) cannot be transitioned.

transition is shorthand for:

The order of values for the transition shorthand property is: transition: [transition-property] [transition-duration] [transition-timing-function (optional)] [transition-delay (optional)]

A separate transition must defined for each end state. In the example below, that means we need a transition on the hover state and another on the default state for when the hover ends and the state returns to normal.

In the example above, try removing the transition property from the default state, then try hovering on and off the link in the preview window. Notice how it no longer transitions back to the default state. You can also try playing with which properties transition.

Notice in the above example that all properties transition on hover, but only background-image transitions back when the hover ends.

Keyframe Animation

Keyframes refer to defined points across the duration of an animation. Using keyframe animation, we can achieve far more complex results than with the simple transition property.

There are two steps to creating a keyframe animation. First you define the animation, which can then be invoked and reused on as many selectors as you like.

Defining the Animation

To define a keyframe animation, you set it up using @keyframes and a name of your choice. Then, you set CSS properties at each point (keyframe) along the duration of the animation (usually expressed in percentages) as are necessary for the effect.

In the above example, since the opacity property isn't updated at the 85% value, opacity continues its transition between 0% and 100% as though there were no keyframe between.

Using the Animation

Now that we have defined our animation, we must apply it to a selector using the animation property. animation is a shorthand property for:

There are several more advanced properties that can be used for animations, but those listed above cover basic implementation.

In the example above, try changing the animation to have the text cycle through a series of colors. Add more keyframe steps to use more colors.

An animation is triggered as soon as the CSS selector is recognized by the browser. In the example above, it is triggered on hover, but if the animation is applied to a static element the animation is triggered on page load. This can be utilized to create page-entrance animations.

It is also worth noting that you can use multiple animations on a single selector by comma-separating the declarations. This can be utilized in combination with animation-delay to create complex effects.

Video Lesson

The following video demo is fully interactive. You can pause at any time to directly edit the code, and resume playback to restore to where you left off.

Practice Exercise