CSS Animations - Part 2

Continuation of Part 1 of CSS animation property.

Direction

The direction the animation moves.

• normal (default value - moves forwards each cycle)
• reverse (moves backwards each cycle)
• alternate (during each cycle, the animation reverses direction, first cycle is forwards)
• alternate-reverse (during each cycle, the animation reverses direction, first cycle is backwards)

Consider this example using ease-in for all squares. While the first and second square go in the same direction, the second alternates its direction so it only runs in the same direction as the first square in every other duration.

The same idea applies for the third and fourth squares. While they move in the same reverse direction the first time, the fourth square alternates its direction so it only matches the third square's direction in every other duration.

Changing direction also affects the ease-in value as it will transform to ease-out for squares reversing their direction.

Example:

.square-blue {
  background-color: rgb(0, 0, 78);
  animation: 2s ease-in infinite normal slide;
}

.square-purple {
  background-color: rgb(83, 0, 99);
  animation: 2s ease-in infinite alternate slide;
}

.square-black {
  background-color: black;
  animation: 2s ease-in infinite reverse slide;
}

.square-brown {
  background-color: #615050;
  animation: 2s ease-in infinite alternate-reverse slide;
}

@keyframes slide {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateX(200px);
  }
}

Fill-mode

Sets the animation style before and after it runs.

• none (default value - no styles will be applied when the animation is not running)
• forwards (see description below)
• backwards (same as forwards, only the first keyframe affects where the element remains after cycling through)
• both (combines the forwards and backwards so the animation is affected in both directions)

Forwards

The element will keep the values from the last moment of animating.

A common example is to have the element remain where it is after it's moved, not resetting its location.

Example:

.square-blue {
  background-color: rgb(0, 0, 78);
  animation: 2s ease-in none slide;
}

.square-purple {
  background-color: rgb(83, 0, 99);
  animation: 2s ease-in forwards slide;
}

.square-black {
  background-color: black;
  animation: 2s ease-in backwards slide;
}

.square-brown {
  background-color: #615050;
  animation: 2s ease-in both slide;
}

@keyframes slide {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateX(200px);
  }
}

Play-state

Set the animation to run or not. This can pause the element during a cycle, which will remain where it is until it is set to run again, starting from where it paused.

• paused (animation is not playing)
• running (animation is playing)

In the example, you can click the button to start and stop the animation. The button adds/removes the class stop from the square.

Example:

.square-blue {
  background-color: rgb(0, 0, 78);
  animation: 2s ease-in infinite alternate slide;
}

.square-blue.stop {
  animation-play-state: paused;
}

@keyframes slide {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateX(300px);
  }
}

Name

With an animation created using keyframes, you can use its name to set it as the element's animation. In all the previous examples, a keyframe called slide was used to animate.

If you don't use a keyframe, the only other value to use is none to stop an animation without affecting the other settings.

I created an animation to levitate a square. You'll see that it rises back up using the alternate value to reverse direction in every other duration.

Clicking the button will set the animation-name to none which resets the animation.

Example:

.square-blue {
  background-color: rgb(0, 0, 78);
  animation: 1s ease-in infinite alternate levitate;
}

.square-blue.stop {
  animation-name: none;
}

@keyframes levitate {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(50px);
  }
}

This concludes my CSS Animation series.

While I wrote these articles for myself, I hope it helped someone else understand what CSS animation has to offer and give you loads of ideas of how to use it it your projects.

Resources

• MDN - CSS Animations