CSS Animations

In this blog we are going to know about animations using CSS.

First thing is, what is animation??

Let me help you with that, animation is something that let an element change it's style from one to another gradually.

Now what's this CSS Animation???🤔

It's basically a technique by which we can change the appearance and behavior of the elements in a page. It has two parts:

CSS properties that describes the type of animation to be performed on any specific element.

keyframes that let that elements change it's behavior or appearance with respect to the animation properties used.

CSS Animation Properties

Here I'll discuss the five properties that are most commonly used animation properties:

• animation-name: It basically describes the name through which our keyframes will access the type of animation we want to use on a any specific element.

  eg: div {
            animation-name: change;
           }
  

• animation-duration: It basically defines what will be the duration of the animation.

  eg: div {
             animation-duration: 2s;
           }
  

• animation-timing-function: It specifies the speed of the animation. It can have following values.

  1. ease: In this the animation starts slowly and then fast and then ends slowly.
  2. ease-in: In this the animation starts slowly.
  3. ease-out: In this the animation ends slowly..
  4. ease-in-out: In this the animation starts slowly and then also ends slowly.

     eg: div {
        animation-timing-function: ease-in-out;
       }
     

• animation-delay: It specifies a delay before animation start using the keyframes.

  eg: div {
         animation-delay: 2s;
        }
  

• animation-iteration-count: It basically defines that how many times a animation will take place.

  eg: div {
         animation-iteration-count: 2;
        }
  

  keyframes

keyframes are those that helps to bind the CSS animations with an element.

      eg: @keyframes change
            {
             from {color: red;}
              to{color: black;}
               }

div {
      color: red;
      animation-name: change;
     }

In the above example you can see that the animation is being bonded with the "div" element using the name "change" and with the help of keyframes the animation will take place i.e.; the color of the font will change from red to black.

So, this was all about the CSS animations which I had learned and tried to share with you all through this blog, there are lot more things about CSS animations which we can cover while learning CSS.

Happy Reading!!!