Skip to content
Related Articles

Related Articles

How to make CSS Animations ?
  • Last Updated : 26 Mar, 2021

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 than falling down as an animation effect. CSS provides us some properties to control the animation effect by changing some of its variables like timing and keyframes etc. 

Some CSS properties are as follows:

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 “@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 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




<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>

Output: 

output

My Personal Notes arrow_drop_up
Recommended Articles
Page :