CSS Animations

By /

In this chapter, you will learn how to create CSS Animations. Animations allow an element to change automatically over time without needing a user to hover or click on it. For example, you can make a box move, change color, grow, or repeat continuously. Let’s understand the important css animation properties step by step.

What is a CSS Animation?

CSS animations are created using two main things:

  • @keyframes
  • The animation property

The @keyframes rule defines what changes should happen, while the animation property controls how the animation runs.

1. Creating an Animation with @keyframes

The @keyframes rule defines the different stages of an animation. For example:

<!DOCTYPE html>
<html>
<head>
  <title>CSS Keyframes</title>

  <style>
    @keyframes changeColor {
      from {
        background-color: lightblue;
      }

      to {
        background-color: blue;
      }
    }

    .box {
      width: 150px;
      padding: 30px;
      background-color: lightblue;

      animation-name: changeColor;
      animation-duration: 2s;
    }
  </style>
</head>

<body>

  <div class="box">
    Animated Box
  </div>

</body>
</html>

Here:

  • from defines the starting state.
  • to defines the ending state.

However, this only creates the animation. You still need to apply it to an element.

2. Using animation-name

The animation-name property connects an element to a @keyframes animation.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Animation Name</title>

  <style>
    @keyframes changeColor {
      from {
        background-color: lightblue;
      }

      to {
        background-color: blue;
      }
    }

    .box {
      width: 150px;
      padding: 30px;
      background-color: lightblue;

      animation-name: changeColor;
      animation-duration: 2s;
    }
  </style>
</head>

<body>

  <div class="box">
    Animated Box
  </div>

</body>
</html>

The box changes from light blue to blue over two seconds.

The animation name must match the name used after @keyframes.

3. Using Percentages in Keyframes

Instead of using only from and to, you can use percentages. For example:

<!DOCTYPE html>
<html>
<head>
  <title>CSS Animation Duration</title>

  <style>
    @keyframes moveBox {
      from {
        transform: translateX(0);
      }

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

    .box {
      width: 150px;
      padding: 30px;
      background-color: lightblue;

      animation-name: moveBox;
      animation-duration: 2s;
    }
  </style>
</head>

<body>

  <div class="box">
    Moving Box
  </div>

</body>
</html>

Here:

  • 0% is the starting point.
  • 50% is the middle of the animation.
  • 100% is the ending point.

This gives you more control over the animation.

4. Animation Duration

The animation-duration property controls how long an animation takes.

For example:

animation-duration: 2s;

This means the animation will take two seconds to complete.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Animation Duration</title>

  <style>
    @keyframes moveBox {
      from {
        transform: translateX(0);
      }

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

    .box {
      width: 150px;
      padding: 30px;
      background-color: lightgreen;

      animation-name: moveBox;
      animation-duration: 2s;
    }
  </style>
</head>

<body>

  <div class="box">
    Moving Box
  </div>

</body>
</html>

The box moves from left to right over two seconds.

5. Animation Timing Function

The animation-timing-function property controls the speed pattern of an animation.

Common values include:

  • ease
  • linear
  • ease-in
  • ease-out
  • ease-in-out

For example:

animation-timing-function: ease-in-out;

The animation starts slowly, becomes faster, and then slows down again. You can experiment with different timing functions to see how they affect the movement.

6. Animation Delay

The animation-delay property adds a delay before an animation starts. For example:

animation-delay: 1s;

This makes the animation wait for one second before starting.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Animation Delay</title>

  <style>
    @keyframes changeColor {
      from {
        background-color: lightyellow;
      }

      to {
        background-color: orange;
      }
    }

    .box {
      width: 150px;
      padding: 30px;
      background-color: lightyellow;

      animation-name: changeColor;
      animation-duration: 2s;
      animation-delay: 1s;
    }
  </style>
</head>

<body>

  <div class="box">
    Animated Box
  </div>

</body>
</html>

The animation waits for one second and then starts.

7. Animation Iteration Count

The animation-iteration-count property controls how many times an animation runs. For example:

animation-iteration-count: 3;

This animation will run three times.

To make an animation repeat continuously, use:

animation-iteration-count: infinite;

Example

<!DOCTYPE html>
<html>
<head>
  <title>Repeated Animation</title>

  <style>
    @keyframes changeColor {
      from {
        background-color: lightblue;
      }

      to {
        background-color: blue;
      }
    }

    .box {
      width: 150px;
      padding: 30px;
      background-color: lightblue;

      animation-name: changeColor;
      animation-duration: 2s;
      animation-iteration-count: infinite;
    }
  </style>
</head>

<body>

  <div class="box">
    Animated Box
  </div>

</body>
</html>

8. Animation Direction

The animation-direction property controls the direction of an animation. The commonly used values are:

  • normal
  • reverse
  • alternate
  • alternate-reverse

For example:

animation-direction: alternate;

With alternate, the animation moves forward and then backward.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Animation Direction</title>

  <style>
    @keyframes moveBox {
      from {
        transform: translateX(0);
      }

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

    .box {
      width: 100px;
      padding: 20px;
      background-color: lightgreen;

      animation-name: moveBox;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      animation-direction: alternate;
    }
  </style>
</head>

<body>

  <div class="box">
    Move
  </div>

</body>
</html>

The box moves forward and backward continuously.

9. Animation Fill Mode

The animation-fill-mode property controls how an element looks before or after an animation. A commonly used value is:

animation-fill-mode: forwards;

This keeps the element in its final animation state after the animation ends. For example:

animation-fill-mode: backwards;

This applies the first keyframe before the animation begins.

For beginners, the most useful value to remember is:

animation-fill-mode: forwards;

10. The animation Shorthand

Instead of writing multiple animation properties separately, you can use the animation shorthand property. For example:

animation: moveBox 2s ease 1s infinite alternate;

This can include:

animation:
  name
  duration
  timing-function
  delay
  iteration-count
  direction;

You don’t always need to include every value.

A simple example is:

animation: moveBox 2s ease;

11. A Simple Practical Animation

Let’s create a simple loading-style animation.

<!DOCTYPE html>
<html>
<head>
  <title>CSS Animation Example</title>

  <style>
    @keyframes bounce {
      0% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-30px);
      }

      100% {
        transform: translateY(0);
      }
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: blue;

      animation:
        bounce
        1s
        ease-in-out
        infinite;
    }
  </style>
</head>

<body>

  <div class="box"></div>

</body>
</html>

The box moves upward and then comes back down continuously.

Here:

  • @keyframes defines the movement.
  • animation applies the animation.
  • 1s controls the duration.
  • ease-in-out controls the speed pattern.
  • infinite makes it repeat continuously.

Quick Recap

  • CSS Animations allow elements to change automatically.
  • @keyframes defines the animation steps.
  • animation-iteration-count controls how many times it runs.
  • infinite repeats an animation continuously.
  • animation-direction controls the direction.
  • animation-fill-mode controls the element’s state before or after an animation.
  • The animation property is a shorthand for animation properties.

Frequently Asked Questions (FAQs)

Q1. What are CSS Animations?

CSS Animations allow elements to change automatically over time. You can use them to move, resize, change colors, or create repeating effects.

Q2. Is this CSS Animation Tutorial suitable for beginners?

Yes, this CSS Animation Tutorial is suitable for beginners and explains @keyframes and important animation properties with simple examples.

Q3. What is keyframes in CSS?

@keyframes is used in CSS Animations to define the different stages or steps of an animation.

Q4. What is the CSS Animation property used for?

The CSS Animation property is used to apply and control an animation, including its name, duration, timing, delay, repetition, and direction.

Q5. What is the difference between CSS Transitions and CSS Animations?

CSS Transitions usually need a change, such as a hover effect, while CSS Animations can run automatically using @keyframes and animation properties.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top