CSS animations allow you to create visually dynamic and interactive effects for your web pages. With CSS animations, you can change the appearance of an element over time, from one style to another, by defining @keyframes to specify the start and end styles and any intermediate styles. You can use CSS animations to create effects such as fading, scaling, rotating, and moving elements.

There are three key advantages to CSS animations over traditional script-driven animation techniques

1. They’re easy to use for simple animations; you can create them without even having to know JavaScript.
2. The animations run well, even under moderate system load. Simple animations can often perform poorly in JavaScript. The rendering engine can use frame-skipping and other techniques to keep the performance as smooth as possible.
3. Letting the browser control the animation sequence lets the browser optimize performance and efficiency by, for example, reducing the update frequency of animations running in tabs that aren’t currently visible.

Without @keyframes, you would be able to do transformations from point A to point B in a smooth manner. But this is just a single animation we are talking about. We can either choose to expand the width or rotate the object. Doing a single thing will not bring out effective animations that please our eyes. It also challenges the developers!

This is why @keyframes was introduced in CSS Animations. It also helps in changing the animations from animation 1 to animation 2 to animation n. On top of it, the developer has the freedom to choose the time (or interval) at which the animation should move from 1 to 2.

There are two ways to achieve the animations using @keyframes 
• Using from-to keywords – “from” will represent where to start the animation and “to” will represent where the animation will end. Here’s an example of a simple CSS animation that changes the background color of an element using from-to keywords:

@keyframes name_of_animation {

from {background-color: red;}

to {background-color: yellow;}

}

#element {

width: 100px;

height: 100px;

animation-name:
name_of_animation;

animation-duration: 4s;

}


In this example, the @keyframes named name_of_animation defines the starting style (background-color: red) and ending style (background-color: yellow) of the animation. The element with an id of #element is then given the animation by using the animation-name and animation-duration properties. The animation will change the background color of the element from red to yellow over the course of 4 seconds.

• Using the percentage assignment – we will define the percentages from 0-100% and define the various states such that when the time reaches that percentage then that animation part will trigger. 0% is the same as “from” and 100% is the same as “to”.

@keyframes name_of_animation {

0% {background-color: red;}

50% {background-color: blue;}

100% {background-color: yellow;}

}

#element {

width: 100px;

height: 100px;

animation-name: name_of_animation;

animation-duration: 4s;

}

In this example, the @keyframes named name_of_animation defines the starting style (background-color: red), the middle style (background-color: blue), and the ending style (background-color: yellow) of the animation. The element with an id of #element is then given the animation by using the animation-name and animation-duration properties. The animation will change the background color of the element from red to blue in 2 seconds and from blue to yellow in the next 2 seconds over a duration of 4 seconds.