CSS animations make an element of the web page move or change its appearance during an action by the user. Modern websites use animations to draw the user’s attention and make the navigation interactive.
Animations help make the website dynamic and offer a satisfactory user experience.
So let’s see how we can make our own animations.
How to add animation to a website?
1)- animation-name and animation duration
To apply an animation to an element we should first of all give this animation a name and a duration.
Let’s say that we have a simple <div></div>
> where we will add some text and we want to animate it.
We will give the <div></div> a width of
50%, a height of 400px and a red background-color. So the HTML will be:
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Animations</title></head><body><div> Hello Class </div></body></html>
And the CSS that you can add inside the <head></head> tag will be:
Now let’s say that we want to change the background-color of the <div></div>, but this time we want the background-color to be blue first, and then green, and then pink, and then at the end yellow. And let’s make the duration of the animation 8s to have time to see it.
Here as you have probably noticed, we removed the keywords from and to and used percentage instead. It is because by using percentage we can define more styles that we want to see during the animation of our element.
The animation will look like:
animation-delay property allows us to add a delay to the start of the animation.
Let’s say that we want the animation to start after 5s, and let’s say this time we want to change the background-color and the width at the same time. So the code will be:
We added the animation-delay property inside the div selector and the width value inside the @keyframes property.
So in the browser the animation will be:
As you have probably noticed at the beginning of this video, when I clicked on the refresh button of the browser, The animation did not start right away, there was a delay of 5s before the start of the animation.
Now let’s say that we want this animation to be repeated for a certain number of times. In this example we want to repeat the animation 3 times.
There is a property for that, this property is animation-iteration-count.
As you have noticed, the animation was supposed to start with the red color first, and with a width of 50%, but as we reversed it, it starts now with the yellow color and a width of 50%.
To alternate between forward and backward animations we should just give the animation-direction a value of alternate.
But to see the alternate animation we should also repeat the animation for a certain amount of time. Let’s say we want to repeat the animation 4 times and alternate at the same time the animation. So the code will be:
So here the animation started the first time with red color and ended yellow, and for the second time went from yellow to red, and for the third time from red to yellow, and for the fourth time from yellow to red.
There is also the value alternate-reverse that makes the animation run backwards first then forward.