A Simple Introduction to CSS Animation

Moving objects attract more attention and add a flavor to the page, CSS animation is a feature in CSS that allows animating DOM element without using any javascript or flash plugins, in this article, we will introduce all the properties related to animations.

To make the animation work, we need to understand the following syntax:


.element-to-animate {
  animation: name duration timing-function delay iteration-count direction fill-mode;
}

@keyframes name-of-the-keyframe {
  0% {
    property-to-animate:value-start;
  }
  30% {
    property-to-animate:value-30pc;
  }
  60% {
    property-to-animate:value-60pc;
  }
  100% {
    property-to-animate:value-end;
  }
}

First, we select our element with the class name "element-to-animate" and apply the animation property. Let discuss each part of the animation property and how to use it:

animation-name:

This property should be equal to the name of the keyframe that we want to animate our element, but what is a keyframe? It is a block element inside which we specify steps of the animation with properties values to animate inside each step. You can add many steps as you want between 0% and 100% steps and you can add many properties inside each keyframe step (if the property is in the list of animated properties).

Example of a keyframe:


@keyframes name-of-the-keyframe {
  0% {
    width: 100px;
    height: 100px;
  }
  100% {
    width: 300px;
    height: 300px;
  }
}

So in this example, our element will start with a width and height equal to 100px then move gradually to 300px. The name of the keyframe should be unique.

animation-duration:

It is the time that the animation will take between step 0% and 100%. If this is an infinite animation, each cycle will be equal to the animation-duration, and the animation will loop infinitely.

animation-timing-function:

This property describes how the animation will behave during the cycle. The possible values are linear, ease, ease-in, ease-out, and ease-in-out. Check the following link describing those functions: https://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp

For more personalized timing functions, you can use cubic-bezier()
function, check the following website about it:

https://cubic-bezier.com/.

animation-delay:

After the element is loaded, you can define an offset before the animation starts. If you want the animation to start immediately, you can put animation-delay: 0s.

warning:

.element-to-animate {
      animation: keyframe-name 2s ease 0 infinite normal forwards;
    }

In this example, the animation will not be working, you have to put 0s or 0ms in the animation delay.

animation-iteration-count:

If we specify a number equal to n, the animation will run exactly n cycles and stop. This property can also take "infinite" as a value and run the animation infinitely.

animation-direction:

It specifies the direction of the animation and how it should act at the end of the cycle, there is for possible values: normal, reverse, alternate, and alternate-reverse. To understand the difference between these values, let work with the following example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animation</title>
  <style>
    @keyframes move {
      0% {
        left: 100px;
      }
  
      100% {
        left: 800px;
      }
    }

    .container {
      width: 50px;
      height: 50px;
      background: #555;
      position: absolute;
      top: 200px;
      left: 100px;
      animation: move 2s ease-out 0s infinite normal;
    }
  </style>
</head>
<body>
  <div class="container"></div>
</body>
</html>

So we have a div element with a black background animated by moving it from the left to the right in an infinite loop, we will give the animation direction different values and see the result.

animation-direction: normal;

animation-direction: reverse;

animation-direction: alternate;

animation-direction: alternate-reverse;

The difference between alternate and alternate-reverse is that alternate-reverse start from step 100% and go down to step 0% when the element is loaded for the first time and continue alternating between these steps. While for alternate, it starts by moving from step 0% to step 100% for the first time.

animation-fill-mode:

After the end and before the start of the animation, we can specify the state of the animated element using this property. There are three possible values: forwards, backwards, and both. Let modify our previous example to be animated for one iteration and try different values for animation-fill-mode property.


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animation</title>
  <style>
    @keyframes move {
      0% {
        left: 100px;
      }
  
      100% {
        left: 500px;
      }
    }

    .container {
      width: 50px;
      height: 50px;
      background: #555;
      position: absolute;
      top: 200px;
      left: 300px;
      animation: move 3s ease-out 5s 1 normal forwards;
    }
  </style>
</head>
<body>
  <div class="container"></div>
</body>
</html>

In this example we have a div element with an initial position "left: 300px", the animation starts from "left: 100px" and moves to "left: 500px".

animation-fill-mode: forwards;

The element stays at its initial position (left 300px) before the start of the animation (we have the animation-delay equal to 5s). When the animation start, the element jump to the position of step 0% and moves to the position of the step 100% and stays there, the element does not go back to the initial position.

animation-fill-mode: backwards;

During the animation-delay, the element occupies the position provided by step 0% in the keyframe (left 100px), the element ignores his initial position (left 300px) during that period and goes back to it only after the end of the animation.

Forwards changes the behavior of the element after the animation ends, backwards, on the other hand, do the same before the start of the animation. They are changing the element in a different way, the question that we could ask is what if we need both behaviors? that exactly what animation-fill-mode both do.

animation-fill-mode: both;

We presented all the properties to make an animation work, but there is still another one that we did not present, and it enables the animation to be interactive. In the next section, I will present the animation-play-state property and how we can use it to interact with the animation.

Animation-play-state:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="styles/test.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animation</title>
  <style>
    @keyframes move {
      0% {
        left: 100px;
      }
  
      100% {
        left: 500px;
      }
    }
    .container {
      width: 50px;
      height: 50px;
      background: #555;
      position: absolute;
      top: 200px;
      left: 100px;
      animation: move 2s ease-out 0s infinite normal forwards;
    }
    
    .container:hover {
      animation-play-state: paused;
    }
  </style>
</head>
<body>
  <div class="container"></div>
</body>
</html>

As we can see, using animation-play-state paused width the hover pseudo-selector, we can stop the animation when the mouse hovers over the container.

Conclusion:

This feature is awesome and allows to add amazing animations the simplest way, but the support is not cross browsers yet, in the day of the writing of this article, "can I use" website show us the following status: