How to make Animation in Css?

Introduction

Today I will tell you how to make animation. We will see all the necessary animation property in this post. You can get the code on my github. So Let's Get Started!!

Animation

Animation are the property use to enhance the look of the website. It give a nice user interference and also use to show people the goal of the website.

A Basic Animation

First Animation: Changing the color of a square

<div id="square">Square</div>

Here I make a square of blue color and then give it some styles. You can take any color!

#square{
    position: relative;
    width: 8rem;
    height: 8rem;
    background-color: rgb(14, 202, 202);
    border-radius: 5px;
    margin: 3rem 0 0 3rem;
    text-align: center;
}

Now we will make a animation.

Step 1: Make animation @keyframes

To make a animation You need to set @keyframes. It hold what styles you want to give to your element at a certain time and then you need to give it a name. I my case I am changing the color of square. So, I give it a name color. Now, You can write @keyframes in two type like

@keyframes color{
    from{
        background-color: rgb(14, 202, 202);
    }
    to{
        background-color: pink;
    }
}

If you want to perform a animation which has two steps you can use to and from. Or you can do it by using percentage value like

@keyframes color{
    0%{
        background-color: rgb(14, 202, 202);
    }
    100%{
        background-color: pink;
    }
}

Percentage values are use when you have to do multiple task in the animation but you can use both! I usually use percentage value for an animation

Step 2: Set animation property on the square.

Now, we will animation property on the square. You need to know about the properties of animation for that. I will tell you those which are mostly use:

• animation-name - It is use to tell the browser which @keyframes you want to use. In my case, my @keyframes name is color.

• animation-duration - It is use to tell in how much time the animation should be finished.

• animation-iteration-count - It is use to tell how many time it should execute.

You can learn more about animation on w3school or on any another website. Now, we will use the animation property but we will write it in a single line like this:

    animation: color 4s infinite;

There are 7 property in animation in Css. For using the animation property in single line, I first write animation-name that is color, then animation-duration which is 4s in my case and then set animation-iteration-count to infinite. If you want to use the animation only one time, you can set it to 1 . You can also set the values of animation property by your self.

Now, if you see your square, it will change its color again and again! Now, we will make the square it move while changing the color.

Second Animation: Moving the square while changing the color!

For that I will use the same square and I will make an another @keyframes for that. We will use the same steps like before

Step 1: Make animation @keyframes

@keyframes move{
    0%{
        left:0px;
        background-color: rgb(14, 202, 202);
    }50%{
        left: 300px;
        background-color: pink;
    }100%{
        left:0px;
        background-color: rgb(14, 202, 202);
    }
}

Here, I make a @keyframes with the name move and I use three steps for this animation. First I set the left to 0px and a background-color. Then at 50% I set left to 300px and change the background-color and at last, I again set left to 0px, so that it will come on the first position.

Step 2: Set animation property on the square

    animation: move 4s infinite;

Here, I set the animation-name to move, then animation-duration to 4s and animation-iteration-count to infinite. Again you can set the animation value according to your choice. And also don't forget to comment the first animation property or things can go wrong!

Conclusion

As the post is already too long so we will continue it on another post. For now, it is enough for today. I hope you understand it. I try my best to tell all the things about animation. And also tell me in the comments on what topic I should write my next post. Thankyou for reading!