Animations

This tutorial is based on the mozilla CSS animation tutorial.

A CSS animation transitions an element through a series of states.  In other words it performs a series of transitions.

To create an animation we define a set of keyframes (in a @keyframes at-rule) each defining a state.  When the animation is triggered, the element transitions between the states defined by the keyframes.  We must also set the animation property for the element to specify the keyframes to use, the duration, a timing function and other values.

Example

Animations can be applied to any element and can be triggered when the element loads as is the case in the example below.  Below, the text within a p element is initially offscreen with its margin-left property set to 100%.  When the element loads an animation begins which decreases the margin-left property to 0.

Slide in from the right

The HTML for the element looks like this.  Here we set the font color to blue and set the duration of the animation and set the name of keyframe at-rule to use using the animation property.

p {
    color: blue;
    animation: 3s slide-right-to-left;
}

The keyframes at-rule for this animation is shown below.

@keyframes slide-right-to-left {
  0% {
    margin-left: 100%;
    width: max-content; 
  }
  100% {
    margin-left: 0%;
  }
}

The first keyframe (from) sets its left side margin at the 100% point of the viewport (i.e. its right edge). The last keyframe (to) sets its left side margin at the 0% point of the viewpoint (i.e. its left edge).   When the animation occurs the browser automatically transitions the style of the element from the style defined in the first keyframe to the style defined in the last keyframe.

You can specify additional keyframes as sell, so that the animation transitions between more than 2 states.  To do so, simply add keyframes with keyframe lables between 0 and 100 percent.

Since 0% and 100% are so important, they are given aliases, from and to respectively which you can use in place of 0% and 100%.

The animation Properties

The animation property can specify 1 or more of the 8 different timing properties.

animation: duration  timing-function  delay  iteration-count  direction  fill-mode  play-state  name;
duration
  • the length of time to complete one animation cycle
  • default value: 0s (seconds)
  • other values: #ms (milliseconds)
  • see animation-duration
timing-function
  • the rate at which the animation occurs
  • default value: ease
  • other values: linear, ease-in, ease-out, ease-in-out, step-start, step-end, and function values
  • see animation-timing-function
delay
  • the time between when the element is loaded and the start of the animation
  • default: 0s
  • other values: #ms (milliseconds)
  • see animation-delay
iteration-count
  • the number of times the animation should complete
  • default value: 1
  • other values: infinite, any positive or negative number including real numbers
  • see animation-iteration-count
direction
  • where the animation should restart
  • default value: normal (i.e. forward)
  • other values: reverse, alternate, alternate-reverse
  • see animation-direction
fill-mode
  • the style used after the animation plays
  • default value: none
  • other values: forwards, backwards, both
  • see animation-fill-mode
play-state
  • whether the animation is running or paused
  • default value: running
  • other values: paused
  • see animation-play-state
name
  • the name of a @keyframes at-rule
  • default value: none
  • other values: name of @keyframes at-rule
  • see animation-name