how do I do animation in css?

The first thing that you have to do is set up a div that you want to animate. You can also target id’s on other tags as well, but for the sake of keeping it simple I am going to set up a div and give it an id. We target keyframes for CSS animation. I will walk you through the process and then have a full working example at the end of this answer.

<div id="animate"></div>

Ok now that I have the div set up I can start to give it some shape. Ill use a circle in CSS for this animation demonstration example in CSS.

#animate{
position: relative;
width:100px;
height:100px;
border-radius:100%;
background:yellow;
}

This will give me a yellow circle but within my CSS commands I have to name the animation so I can target with keyframes. I do this by adding this line to the above code. -webkit-animation-name: animatecircle; for Chrome and Safari browsers and animation-name:animatecircle; for the rest of the browsers.

#animate{
position: relative;
width:100px;
height:100px;
border-radius:100%;
background:yellow;
-webkit-animation-name: animatecircle;
animation-name:animatecircle;
}

Now, I can give an animation duration time to the above code to speed up or slow down the animation in CSS. For safari and chrome I will use this command to control the duration -webkit-animation-duration: 4s; and for other browsers I will use this command,  animation-duration: 4s;. Now our CSS code should look like this.

#animate{
position: relative;
width:100px;
height:100px;
border-radius:100%;
background:yellow;
-webkit-animation-name: animatecircle;
animation-name:animatecircle;
-webkit-animation-duration: 4s;
animation-duration: 4s;
}

So now that we have the preliminary code work done for our CSS animation we need to start applying keyframes. We do this in percentages. The percentages target the time frame. Lets take the example 1 to 4 seconds. When the animation is at 1 seconds the animation will display whatever is before the 25% mark, when it is at 2 it will display whatever is before the 50% mark and so on. There is a difference once again between Chrome, Safari and the rest of the browsers. This first code will be for Chrome and Safari. Notice I am also targeting what I named the animation.

@-webkit-keyframes animatecircle {
0% {background-color:orange; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:pink; left:200px; top:200px;}
75% {background-color:blue; left:0px; top:200px;}
100% {background-color:black; left:0px; top:0px;}
}

The rest of the browsers have a very similar code for CSS animation, we just take off -webkit.

@keyframes animatecircle {
0% {background-color:orange; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:pink; left:200px; top:200px;}
75% {background-color:blue; left:0px; top:200px;}
100% {background-color:black; left:0px; top:0px;}
}

Here is a complete CSS animation example code for you.

<div id="animate"></div>

<style>
#animate{
position: relative;
width:100px;
height:100px;
border-radius:100%;
background:yellow;
-webkit-animation-name: animatecircle;
animation-name:animatecircle;
-webkit-animation-duration: 4s;
animation-duration: 4s;
}
@-webkit-keyframes animatecircle {
0% {background-color:orange; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:pink; left:200px; top:200px;}
75% {background-color:blue; left:0px; top:200px;}
100% {background-color:black; left:0px; top:0px;}
}
@keyframes animatecircle {
0% {background-color:orange; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:pink; left:200px; top:200px;}
75% {background-color:blue; left:0px; top:200px;}
100% {background-color:black; left:0px; top:0px;}
}</style>

If you wanted to add a delay to your animation, you would add this CSS code.

animation-delay: 2s;

If you want your CSS animation to repeat a certain amount of times use this code and adjust the number. The code below repeats the animation 3 times.

animation-iteration-count: 3;

If you want the animation to keep playing you would add this CSS code to your animation.

animation-iteration-count: infinite;

If you want to reverse your CSS animation, use this code.

animation-direction: reverse;

If you want to alternate the CSS animation, use this code.

animation-direction: alternate;

To add more timing functions to your CSS animations, you can use these commands. You want to set them to your main div id. In our example we would put these commands in our CSS code after #animate{ in here }

1. Linear = same speed from start to finish
2. Ease = slow start then fast slow at the end
3. Ease-in = slow start
4. Ease-out = slow end
5. Ease-in-out = slow start and end
6. cubic-bezier(n,n,n,n)= custom time

animation-timing-function: linear;
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;

You can also shorthand your animation code like this code below.

animation: example 5s linear 2s infinite alternate;

🙂