Swati Lathia

Learning ways

CSS Animation

What is Animation in CSS?

  • CSS animation is a technique which is used in web development to create dynamic and visually appealing effects on a webpage without the need for complex JavaScript code or external plugins.
  • It allows you to animate the properties of HTML elements, such as their position, size, color, and opacity, by defining keyframes and transitions using Cascading Style Sheets (CSS).
  • Keyframes: Keyframes are the foundation of CSS animations. They define the starting and ending points of an animation along with any intermediate stages. Keyframes are defined using the @keyframes rule and specify the percentage of the animation’s progress (from 0% to 100%) at which certain styles should be applied.
  • If you define CSS styles within the @keyframes rule, the animation will smoothly transition from its current style to the specified new style at specific points in time.
  • Throughout the animation, it’s possible to modify the CSS styles multiple times.
  • It indicates the timing of style changes either as a percentage or by using the terms ‘from’ and ‘to,’ which are equivalent to 0% and 100%. At 0%, the animation starts, and at 100%, it concludes.
  • Syntax
@keyframes animationname {keyframes-selector {css-styles;}}
  • Here, animationame indicates name of animation.
  • Keyframes-selector indicates percentage of animation duration. Values may be (0 – 100%) or From (same as 0) to To (same as 100).
  • CSS-styles indicates one or more CSS style properties.
  • To apply an animation to an element, you use following CSS properties:

Animation Properties

  • animation-name: It specifies the name of the keyframes animation.
  • animation-duration: It sets the duration of the animation in seconds or milliseconds. If this property is not specified, then no animation will occur as its default value if 0s (zero second).
  • animation-timing-function: It defines the acceleration and deceleration of the animation. It essentially determines how an animated property changes values as time passes. The values of this property are:
  1. ease: This is the default timing function and creates a smooth, gradual acceleration and deceleration. It starts slow, speeds up in the middle, and slows down again at the end of the animation.
  2. linear: This option produces a constant speed animation. It changes properties at a constant rate throughout the animation.
  3. ease-in: It starts slow and then accelerates, creating a quick finish.
  4. ease-out: It starts fast and then decelerates, creating a slow finish.
  5. ease-in-out: This timing function combines both easing in and easing out, creating a moderate acceleration and deceleration effect.
  • animation-delay: It specifies a delay before the animation starts.
  • animation-iteration-count: It determines how many times the animation should repeat. The value can be either any number, like 1, 2, 3 or “infinite” to repeat animation indefinitely.
  • animation-direction: It sets whether the animation should play forward, backward, or alternate. This property can take the following values:
    • normal (default): The animation plays forward from the start to the end and then restarts from the beginning. This is the default behavior.
    • reverse: The animation plays backward from the end to the start and then restarts from the end.
    • alternate: The animation alternates between playing forward and backward. It starts by playing forward, then plays backward, and so on.
    • alternate-reverse: Similar to “alternate,” but it starts by playing backward, then plays forward, and repeats in that pattern.
  • animation-fill-mode: This property determines how the styles of an element are applied before and after the animation is executed. It specifies how the element should behave during the periods before and after the animation runs, which are typically referred to as the “animation’s fill modes.” There are four possible values for the property:
    1. none: This is the default value. It means that the element’s styles are not affected by the animation before or after it runs. The element will immediately switch back to its original styles once the animation completes.
    2. forwards: In this mode, the element retains the computed values of the animation’s final keyframe (the keyframe with a 100% progress) after the animation finishes. This means that the element will stay in its animated state even after the animation has completed.
    3. backwards: In this mode, the element applies the styles of the animation’s initial keyframe (the keyframe with a 0% progress) before the animation starts. This ensures that the element is in the correct starting state before the animation begins.
    4. both: This mode combines the behavior of both forwards and backwards. It applies the styles of the initial keyframe before the animation starts and retains the styles of the final keyframe after it completes.
  • animation-play-state: This property specifies whether the animation is running or paused.
  • animation: This is shorthand property to set all the animation properties.
  • To understand all these properties, let us take one by one example of each property.
  • Let us start with simple example to animate <div> element. The animation will last for 5 seconds, and it will gradually change the background-color of the <div> element from “pink” to “purple”.

Example 1: animation-name and keyframes (from – to)

<!DOCTYPE html>
<html>
	<head>
		<style> 
			#d_ex1
			{
				width:200px;
				height:200px;
				background-color:pink;
				animation-name:ex1;
				animation-duration:5s;
			}
			@keyframes ex1 
			{
				from 
				{
					background-color:pink;
				}
				to 
				{
					background-color:purple;
				}
			}
		</style>
	</head>
	<body>

                <b>This animation takes 5 seconds to complete</b><br>
		<div id='d_ex1'></div>
		<B>When an animation is completed, 
		it goes back to its original style/color.</B>
		</body>
</html>

Output

This animation takes 5 seconds to complete
When an animation is completed, it goes back to its original style/color.
  • We can also use percentage as shown in following example.

Example 2: animation-name, animation-duration and keyframes (in %)

<!DOCTYPE html>
<html>
	<head>
		<style>
			#d_ex2
			{
				width: 100px;
				height: 100px;
				background-color:pink;
				animation-name:ex2;
				animation-duration:5s;
			}
			@keyframes ex2 
			{
				0%   {background-color: pink;}
				25%  {background-color: orange;}
				50%  {background-color: red;}
				100% {background-color: purple;}
			}
		</style>
	</head>
	<body>
		<div id='d_ex2'></div>
	</body>
</html>

Output

  • Let us take another example that will change both the background-color and the position of the <div> element when the animation is 25% complete, 50% complete, and again when the animation is 100% complete.

Example 3: Color and Position with keyframes (in %)

<!DOCTYPE html>
<html>
<head>
<style> 
#d_ex3
{
  width: 100px;
  height: 100px;
  background-color: pink;
  position: relative;
  animation-name: ex3;
  animation-duration: 4s;
}

@keyframes ex3
{
  0%   {background-color:pink; left:0px; top:0px;}
  25%  {background-color:orange; left:200px; top:0px;}
  50%  {background-color:yellow; left:200px; top:200px;}
  75%  {background-color:purple; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
	<div id='d_ex3'></div>
</body>
</html>

Output

  • Let us take another example with animation-timing-function property

Example 4: Animation timing function

<!DOCTYPE html>
<html>
	<head>
		<style>
			#d_l,#d_e,#d_ei,#d_eo,#d_eio
			{
				width:100px;
				height:50px;
				background-color:purple;
				animation-name:anim_time_fun;
				animation-duration:5s;	
				position:relative;
				color:white;
			}
			@keyframes anim_time_fun
			{
				from{left:0px;}
				to{left:300px;}
			}
			#d_l{animation-timing-function:linear;}
			#d_e{animation-timing-function:ease;}
			#d_ei{animation-timing-function:ease-in;}
			#d_eo{animation-timing-function:ease-out;}
			#d_eio{animation-timing-function:ease-in-out;}
		</style>
	<head>
	<body>
		<div id='d_l'>I am Linear</div>
		<div id='d_e'>I am Ease</div>
		<div id='d_ei'>I am Ease-In</div>
		<div id='d_eo'>I am Ease-Out</div>
		<div id='d_eio'>I am Ease-In-Out</div>
	</body>
</html>

Output

I am Linear
I am Ease
I am Ease-In
I am Ease-Out
I am Ease-In-Out
  • Let us take another example with animation-delay property

Example 5: Animation delay

<!DOCTYPE html>
<html>
	<head>
		<style>
			#d_delay
			{
				font-size:100px;
				animation-name:anim_delay;
				animation-duration:5s;	
				position:relative;
				animation-delay:2s;
			}
			@keyframes anim_delay
			{
				from{left:0px;}
				to{left:300px;}
			}
				
		</style>
	<head>
	<body>
                <b>I will start after 2 seconds</b>
		<div id='d_delay'>&#128675;</div>
	</body>
</html>

Output

I will start after 2 seconds
🚣
  • Let us check another example with animation-iteration-count property

Example 6: Animation Iteration Count

<!DOCTYPE html>
<html>
	<head>
		<style>
			#it_count
			{
				font-size:100px;
				animation-name:iter_count;
				animation-duration:5s;	
				position:relative;
				animation-iteration-count:infinite;
			}
			@keyframes iter_count
			{
				from{left:0px;}
				to{left:500px;}
			}
		</style>
	<head>
	<body>
        <b>I am infinite animation</b>
		<div id='it_count'>&#128675;</div>
	</body>
</html>

Output

I am infinite animation
🚣
  • Let us check another example with animation-direction property

Example 7: Animation Direction

<!DOCTYPE html>
<html>
	<head>
		<style>
			#animat_dir1
			{
				font-size:80px;
				animation-name:anim_dir1;
				animation-duration:5s;	
				position:relative;
				animation-direction:reverse;
				animation-iteration-count:2;
			}
			@keyframes anim_dir1
			{
				0%{left:0px;top:0px;}
				25%{left:400px;top:0px;}
				50%{left:400px;top:400px;}
				75%{left:0px;top:400px;}
				100%{left:0px;top:0px;}
			}
		</style>
	<head>
	<body>
        <div id='animat_dir1'>&#128675;</div>
	</body>
</html>

Output

🚣
  • Let us check another example with animation-fill-mode property

Example 8: Animation fill mode – none

<!DOCTYPE html>
<html>
<head>
	<style>
		.div_none 
		{
			width: 100px;
			height: 100px;
			background-color:skyblue;
			animation-name: example_slide;
			animation-duration:5s;
			animation-fill-mode:none;
		}
		@keyframes example_slide 
		{
			0% 
			{
				transform: translateX(0);
			}
			100% 
			{
				transform: translateX(200px);
			}
		}
	</style>
</head>
<body>

        <b>This division gets back to its original position after animation</b>
	<div class=div_none></div>
</body>
</html>

Output

This division gets back to its original position after animation

Example 9: Animation fill mode – forwards

<!DOCTYPE html>
<html>
<head>
	<style>
		.div_for 
		{
			width: 100px;
			height: 100px;
			background-color:skyblue;
			animation-name: example_slide1;
			animation-duration:5s;
			animation-fill-mode:forwards;
		}
		@keyframes example_slide1 
		{
			0% 
			{
				transform: translateX(0);
			}
			100% 
			{
				transform: translateX(200px);
			}
		}
	</style>
</head>
<body>
        <b>This division retains its animated value after the animation</b>
	<div class=div_for></div>
</body>
</html>

Output

This division retains its animated value after the animation

Example 10: Animation fill mode – backwards

<!DOCTYPE html>
<html>
<head>
<style>
.d_back 
{
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: scale_anim;
  animation-duration: 2s;
  animation-fill-mode: backwards;
}

@keyframes scale_anim 
{
  0% 
  {
    transform: scale(0);
    background-color: green;
  }
  100% 
  {
    transform: scale(1);
    background-color: blue;
  }
}
</style>
</head>
<body>
  <div class="d_back"></div>
</body>
</html>

Output

  • In above example, we have a div element with the class “d_back.” We define a CSS animation called scale_anim that scales the box from scale(0) to scale(1) and changes its background color from green to blue.
  • With ” animation-fill-mode:backwards “, the following happens
    1. Even before the animation starts, the box is styled according to the properties defined at 0% in the keyframes (scale(0) and background-color: green).
    2. When the animation starts, it continues from this initial state and proceeds to the final state defined at 100% in the keyframes (scale(1) and background-color: blue).
  • Let us take example of animation-play-state property.

Example 11: Animation-play-state

<!DOCTYPE html>
<html>
<head>
<style>
.d_anim1
{
  width: 100px;
  height: 100px;
  background-color: red;
  animation:anim 5s reverse;
}
.d_anim1:hover
{
	animation-play-state:paused;
}
@keyframes anim 
{
  0% 
  {
    transform: scale(0);
    background-color: green;
  }
  100% 
  {
    transform: scale(1);
    background-color: blue;
  }
}
</style>
</head>
<body>
  <div class="d_anim1"></div>
</body>
</html>

Output

  • Let us check final property – animation (short hand property) with example

Example 12: Animation (Short Hand Property)

<!DOCTYPE html>
<html>
<head>
<style>
.d_anim 
{
  width: 100px;
  height: 100px;
  background-color: red;
  animation:anim 5s 3s infinite reverse;
}

@keyframes anim 
{
  0% 
  {
    transform: scale(0);
    background-color: green;
  }
  100% 
  {
    transform: scale(1);
    background-color: blue;
  }
}
</style>
</head>
<body>
  <div class="d_anim"></div>
</body>
</html>

Output

  • In above example, we have combined animation-name, animation-duration, animation-delay, animation-iteration-count and animation-direction properties in one animation property.
Scroll to top