How to make Animation in Css?
Tags: animation, css, tutorial
Published: 2024-07-14 10:53:32

## 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](https://github.com/Lakshita-Kumawat/Animation-Tutorial). 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](https://www.w3schools.com/css/css3_animations.asp) 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!