How to Create CSS3 Keyframe Animations?

In this tutorial, we will learn how to create CSS3 keyframe animations with example? By Apurva Mathur Last updated : July 26, 2023

Animation

Animation is most important for websites because it can tell the content uniquely and emotions and ideas that both children and adults can understand. We all love animations, it makes the website different from other websites. If animations are used with proper creativity then people visiting your website will feel connected. It plays a huge role in getting the attention of the audience. Animation is the functional medium in which the images or objects work to appear as moving images. It is all about visualizing which is capable of making an interaction.

CSS3 Keyframe Animations

The key frame or keyframe is the action that works when we give the start and end point. It is like defining the state, from which state to which state. This is the main component because of which CSS animations work on elements.

CSS3 Example for Creating Keyframe Animations

If we want to change the color of some div from green to pink then in that case we'll use keyframe, as we have one starting point and one ending point.

<!DOCTYPE html>
<html>
  <head>
    <style>
      p{
      font-size: 50px;
      color:white;
      background-color: green;
      animation-name: paragraphtag;
      animation-duration: 5s;
      }
      @keyframes paragraphtag {
      from {background-color: red;}
      to {background-color: pink;}
      }
    </style>
  </head>
  <body>
    <p>Include help welcome's you</p>
  </body>
</html>

Explanation of CSS3 Keyframe Animations

Let us first understand the HTML code,

Here I've just taken a single element to show you all how keyframe animation work, I've taken a paragraph tag you can take any tag, the syntax will remain the same for all.

CSS code:

Here, some basic styling properties are defined like font size, background color, etc. The only thing new and important over here is the animation name and animation duration. Let us understand them one by one.

Animation name can be anything, it is just like the identification name for a keyframe. When you are making a website then you may use more than one keyframe so in that case, this animation name tells the keyframe action of which element you are talking about.
For example, in the above code, I've written animation-name: paragraph tag which means I'm telling keyframe action that all the changes which I want should be from this section.
Note: The animation name can be anything.
Animation duration: As the name suggests it is the duration of how long you want your animation to stay.

Now coming to the keyframe styling, here the syntax is simple I've used keyframe with the animation name I provided above:

Keyframe paragraphtag :{
    from{}
    to{} 
}

Keyframe keyword is important to write. Then inside this, you have to write the property which you want to change through animation.

Here in the above example, I've changed the background-color-green to background-color-pink. Two things that you should keep in mind while writing a keyframe is that "from and to" these two keywords are really important and each property will be given in different curly brackets.

The output of the above example is:

At starting point:

During animation:

At the end of animation:

CSS Examples »

Text in Transparent Box using CSS3

How to change background color in CSS?