Animation

Syntax

The animation property is a combination of animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state properties.You can declare keyframes for an animations using the @keyframes rule.


@keyframes fade-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(.75);
  }
}

.fade-out {
  animation-name: fade-out;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
  animation-iteration-count: infinite;

  /* All combined */
  animation: fade-out 1s 1s ease-in-out alternate infinite;
}

→

Animated

Animation properties

Animation duration and delay

Both properties accept a unit value in seconds or milliseconds, respectively anotated with s or ms.

Animation timing function

Just like the transition-timing-function property, the animation-timing-function property accepts both a list of predifined functions and a custom cubic-bezier function.

Cubic bezier playground

.animation {animation: fade-in 4s ease-in-out infinite;}

/* Equal to cubic-bezier(0, 0, 1, 1) */
.linear {animation-timing-function: linear;}

/* Equal to cubic-bezier(0.25, 0.1, 0.25, 1) */
.ease {animation-timing-function: ease;}

/* Equal to cubic-bezier(0.42, 0, 1, 1) */
.ease-in {animation-timing-function: ease-in;}

/* Equal to cubic-bezier(0, 0, 0.58, 1) */
.ease-out {animation-timing-function: ease-out;}

/* Equal to cubic-bezier(0.42, 0, 0.58, 1) */
.ease-in-out {animation-timing-function: ease-in-out;}

.cubic-bezier {animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);}

/* Animate the element 4 times 
  including the first position but excluding the last */
.step {animation-timing-function: steps(4);}

/* Animate the element 4 times 
  excluding the first position and including the last */
.step-start {animation-timing-function: steps(4, jump-start);}

/* Animate the element 4 times 
  including the first position and excluding the last */
.step-end {animation-timing-function: steps(4, jump-end);}

/* Animate the element 4 times 
  excluding the first and last position */
.step-both {animation-timing-function: steps(4, jump-both);}

/* Animate the element 4 times 
  including the first and last position */
.step-none {animation-timing-function: steps(4, jump-none);}

@keyframes fade-in {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(.75);
  }
}

→

Linear

Ease

Ease in

Ease out

Ease in out

Cubic bezier

Step

Step start

Step end

Step both

Step none

Animation iteration count

The animation-iteration-count property defines the number of times an animation should be played before stopping.

.animation-iteration-count {animation: fade-in 1s ease-in-out;}

/* Equal to infinite */
.infinite {animation-iteration-count: infinite;}

/* Equal to 1 */
.one {animation-iteration-count: 1;}

/* Equal to 5 */
.five {animation-iteration-count: 5;}

@keyframes fade-in {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(.75);
  }
}

→

Infinite

1

5

Animation direction

The animation-direction property defines whether the animation should play forwards, backwards, or alternately.

.animation-direction {animation: fade-in 1s ease-in-out infinite;}

/* Equal to normal */
.normal {animation-direction: normal;}

/* Equal to reverse */
.reverse {animation-direction: reverse;}

/* Equal to alternate */
.alternate {animation-direction: alternate;}

/* Equal to alternate-reverse */
.alternate-reverse {animation-direction: alternate-reverse;}

@keyframes fade-in {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(.75);
  }
}

→

Normal

Reverse

Alternate

Alternate reverse

Animation fill mode

The animation-fill-mode property defines how a CSS animation should behave when the animation is not playing, either before it starts or after it ends.

.animation {animation: fade-in 4s 2s ease-in-out infinite;}

/* Jumps in and out of the animation */
.none {animation-fill-mode: none;}

/* keeps the styling of the last 
keyframe after the animation ends */
.forwards {animation-fill-mode: forwards;}

/* keeps the styling of the first 
keyframe before the animation starts */
.backwards {animation-fill-mode: backwards;}

/* keeps the styling of the last keyframe 
before the animation starts and the first 
keyframe after the animation ends */
.both {animation-fill-mode: both;}

@keyframes fade-in {
  from {
    color: deeppink;
    transform: scale(1);
  }
  to {
    color: black;
    transform: scale(.75);
  }
}

→

None

Forwards

Backwards

Both

Animation play state

The animation-play-state property defines whether the animation is running or paused. This allows you to pause an animation mid-way.


.animation-play-state {
  animation-play-state: running;
  animation-play-state: paused;
}

Learn more about animations