How to make CSS Animations ?

Last Updated : 06 Jun, 2023

Animation is a way using which we can create the illusion of motion by placing still images one after another in a typical format. For example, we can have a ball rising up at some instant then falling down as an animation effect. CSS provides us with some properties to control the animation effect by changing some of its variables like timing and keyframes etc.

Some CSS properties are as follows:

animation-name: Specifies the name of the animation to be used.
animation-iteration-count: It denotes the number of cycles the animation should be in effect.
animation-direction: Specifies the direction in which the animation should be played.
animation-delay: The time period after which the animation should start.
animation-duration: Mentions the time duration for which the animation continues.

Along with all these methods, there are some other methods also such as animation-timing-function, @keyframes, animation-fill-mode, etc.

Explanation: Basically in our CSS code first we have to specify the main effect which our animation should display by using the “@keyframes” property. Then inside this block, we have to write the effect of animation i.e. the change in size, from which color to which color changes must happen, change in opacity, and many more. These all can be mentioned in terms of the percentage of the total time slot or using the “from” and “to” keywords. Hence, this block contains the main animation code to be displayed.

Below are examples of creating animations. The first animation results in a change of opacity and the second one results in a change of background-color.

Example 1:

CSS

@keyframes animation_example1 {
 
  /* animation results in change of opacity*/
  from {
    opacity: 0.3;
  }
 
  to {
    opacity: 1;
  }
}

Example 2: In this code we created animations but to link these animations’ effect to the HTML tags (maybe img or other ones) we have to specify their name in the CSS style of that tag.

CSS

@keyframes animation_example2 {
 
  /* here the amount of total time is divided */
  0% {
    height: 220px;
    width: 220px;
    opacity: 0.7;
  }
 
  50% {
    height: 240px;
    width: 240px;
    opacity: 0.4;
  }
}

Example 3: In this code, we are able to mention the details of the animation like the timing and delay period and also the iteration counts etc

CSS

#pic1 {
    animation-name: animation_example2;
    animation-duration: 2s;
    animation-delay: 0.5s;
    animation-iteration-count: infinite;
}
 
/* This animation will continue 
    infinite number of times */

Below is the complete HTML code for which the above-mentioned CSS will be applied to produce the results.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        @keyframes animation_example2 {
 
            /* here the amount of total time is divided */
            0% {
                opacity: 1;
            }
 
            50% {
                opacity: 0.1;
            }
        }
 
        /* This animation will continue
        infinite number of times */
        #gfg {
            animation-name: animation_example2;
            animation-duration: 2s;
            animation-delay: 0.5s;
            animation-iteration-count: infinite;
        }
    </style>
</head>
 
<body>
    <div id="gfg" style="width:250px;height:100px;
                         border:1px solid #000;
                         background-color:blue">
    </div>
</body>
</html>