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 of CSS Animations

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:

  • In CSS Animations, @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.

Mini Quiz

0%

CSS - QUIZ 23

1 / 5

Q1. Which rule defines the different stages of a CSS animation?

2 / 5

Q2. Which property connects an element to a @keyframes animation?

3 / 5

Q3. What does animation-duration: 2s; control?

4 / 5

Q4. Which value makes an animation repeat continuously?

5 / 5

Q5. What does animation-direction: alternate; do?

Your score is

The average score is 0%

0%

By Wordpress Quiz plugin

Mini Project

Mini Project: Music Player Card

Question:

Create a stylish Music Player Card where a song is currently playing. The album artwork, music bars, and controls should use CSS animations to make the player feel active.

Requirements

  • Create a music player with a song title, artist name, album artwork, and playback controls.
  • Use a continuous animation to make the album artwork gently move while the song is playing.
  • Add animated music bars that change height at different stages.
  • Show a progress bar that moves from the beginning toward the end of the song.
  • Add a small delay before one animation starts.
  • Use different animation speeds and timing effects for different elements.
  • Use previous CSS concepts to style the card with proper spacing, colors, borders, and text.
  • Add a hover effect to the controls using a transition.
View Answer Code
<!DOCTYPE html>
<html>
<head>
  <title>Animated Music Player</title>

  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #eef2ff;
      text-align: center;
      padding: 50px;
    }

    .player {
      width: 330px;
      margin: auto;
      padding: 25px;
      background-color: white;
      border: 2px solid #4f46e5;
      border-radius: 15px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    }

    h1 {
      color: #312e81;
      margin-bottom: 5px;
    }

    .artist {
      color: #6b7280;
      margin-top: 0;
    }

    .album {
      width: 150px;
      height: 150px;
      margin: 25px auto;
      background-color: #4f46e5;
      border-radius: 50%;

      animation:
        albumMove
        3s
        ease-in-out
        infinite
        alternate;
    }

    @keyframes albumMove {
      0% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.05);
      }

      100% {
        transform: scale(1);
      }
    }

    .music-bars {
      height: 60px;
      margin: 20px auto;
    }

    .bar {
      display: inline-block;
      width: 8px;
      height: 20px;
      margin: 0 3px;
      background-color: #4f46e5;
      border-radius: 5px;

      animation:
        sound
        0.8s
        ease-in-out
        infinite
        alternate;
    }

    .bar:nth-child(2) {
      animation-delay: 0.2s;
    }

    .bar:nth-child(3) {
      animation-delay: 0.4s;
    }

    .bar:nth-child(4) {
      animation-delay: 0.6s;
    }

    @keyframes sound {
      0% {
        height: 15px;
      }

      50% {
        height: 50px;
      }

      100% {
        height: 25px;
      }
    }

    .progress {
      width: 100%;
      height: 8px;
      background-color: #e5e7eb;
      border-radius: 5px;
      overflow: hidden;
      margin: 20px 0;
    }

    .progress-bar {
      width: 0;
      height: 100%;
      background-color: #4f46e5;

      animation:
        progress
        6s
        linear
        1s
        infinite;
    }

    @keyframes progress {
      0% {
        width: 0;
      }

      100% {
        width: 100%;
      }
    }

    .controls button {
      padding: 10px 18px;
      margin: 5px;
      border: 1px solid #4f46e5;
      border-radius: 8px;
      background-color: white;
      color: #312e81;
      cursor: pointer;

      transition:
        background-color 0.3s ease,
        color 0.3s ease;
    }

    .controls button:hover {
      background-color: #4f46e5;
      color: white;
    }
  </style>
</head>

<body>

  <div class="player">

    <h1>Now Playing</h1>
    <p class="artist">The Coding Beats</p>

    <div class="album"></div>

    <div class="music-bars">
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
    </div>

    <h2>Code Your Dreams</h2>

    <div class="progress">
      <div class="progress-bar"></div>
    </div>

    <div class="controls">
      <button>◀</button>
      <button>▶</button>
      <button>▶▶</button>
    </div>

  </div>

</body>
</html>

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