CSS animation allows HTML elements to smoothly transition between different style configurations. For example,
Hover over to start animation effect
CSS animations are commonly used for enhancing user experience and adding visual interest to websites.
The advantages of CSS animation include improved performance, reduced reliance on JavaScript, and enhanced user experience through visually engaging effects.
CSS Animation Properties
CSS animation has the following properties:
- @keyframe rule
- animation-name
- animation-duration
- animation-delay
- animation-iteration-count
- animation-direction
- animation-timing-function
- animation-fill-mode
- animation
We will look into each of these in detail.
Note: CSS animations involve defining keyframe styles and binding them to HTML elements for animation.
The keyframe Rule
The CSS @keyframe rule defines the element style at various
points in time during the animation.
The keyframes are defined using percentages. The 0% keyframe is
the starting point of the animation, and the 100% keyframe is
the endpoint.
The percentages in between define the intermediate steps of the animation. For example,
@keyframes animate-background {
0% {
background-color: orange;
}
100% {
background-color: red;
}
}
Here, the background color of the element gradually changes from
orange to red during the animation.
And animate-background is the animation name that associates
the keyframe styles with the HTML element.
Creating a Simple Animation
The animation-name and
animation-duration properties are required for creating a
simple animation, along with the @keyframe rule.
Let's see an example,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<div></div>
<p>Hover above div to see animation.</p>
</body>
</html>
div {
width: 100px;
height: 100px;
background-color: purple;
}
div:hover {
/* Specifies the animation name */
animation-name: animate-background;
/* Specifies the animation duration */
animation-duration: 5s;
}
@keyframes animate-background {
0% {
background-color: orange;
}
100% {
background-color: green;
}
}
Browser Output
Hover above div to see animation.
In the above example,
-
animation-name: animate-backgroundspecifies the animation name -
animation-duration: 5sspecifies the animation duration
The @keyframe rule binds keyframe styles to the
div element using the animate-background animation
name.
As a result, the background of the div element gradually
changes from orange color to green color during
the animation duration.
Finally, the background color falls back to the originally specified
purple color when the animation is completed.
CSS animation-delay Property
The animation-delay property specifies the delay time before
the animation starts. It can be expressed in seconds (s) or milliseconds
(ms).
Let's see an example,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS animation-delay</title>
</head>
<body>
<p>
Hover the pink container to see animation. The animation starts
after 2 seconds of hover and stops when the mouse leaves the
container.
</p>
<div class="container">
<div class="inner-div"></div>
</div>
</body>
</html>
.container {
max-width: 700px;
background-color: pink;
padding: 20px;
}
.inner-div {
width: 100px;
height: 100px;
background-color: purple;
position: relative;
top: 0;
}
.container:hover .inner-div {
/* specifies the animation name */
animation-name: move-to-right;
/* specifies the animation duration */
animation-duration: 5s;
/* delays the animation by 2 seconds */
animation-delay: 2s;
}
@keyframes move-to-right {
0% {
top: 0%;
left: 0%;
}
100% {
top: 0%;
left: 85%;
}
}
Browser Output
Hover the pink container to see animation. The animation starts after 2 seconds of hover and stops when the mouse leaves the container.
In the above example, the animation starts after the 2s delay
while hovering over the pink container.
CSS animation-iteration-count Property
The animation-iteration-count property specifies the number of
times the animation should be played.
The value of the animation-iteration-count property can be
specified in the integers or once and infinite keywords.
Let's see an example,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Animation</title>
</head>
<body>
<p>
Hover the pink container to see animation. The animation repeats 2
times.
</p>
<div class="container">
<div class="inner-div"></div>
</div>
</body>
</html>
.container {
max-width: 700px;
padding: 20px;
background-color: pink;
}
.inner-div {
width: 100px;
height: 100px;
background-color: purple;
position: relative;
top: 0;
}
.container:hover .inner-div {
/* specifies the animation name */
animation-name: move-to-right;
/* specifies the animation duration */
animation-duration: 3s;
/* repeats the animation 2 times */
animation-iteration-count: 2;
}
@keyframes move-to-right {
0% {
top: 0%;
left: 0%;
}
100% {
top: 0%;
left: 85%;
}
}
Browser Output
Hover the pink container to see animation. The animation repeats 2 times.
In the above example,
animation-iteration-count: 2;
repeats the animation two times.
CSS animation-direction Property
The animation-direction property specifies the direction for
the animation.
The possible values for the animation-direction property are:
normal: animation plays forward, default valuereverse: animation plays backward-
alternate: animation alternates between forward and backward -
alternate-reverse: animation alternates between backward and forward
Let's see an example,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS animation-direction</title>
</head>
<body>
<p>
Hover the pink container to see animation. The animation repeats
2 times in alternate directions: forward and backward
respectively.
</p>
<div class="container">
<div class="inner-div"></div>
</div>
</body>
</html>
.container {
max-width: 700px;
background-color: pink;
padding: 20px;
}
.inner-div {
width: 100px;
height: 100px;
background-color: purple;
position: relative;
top: 0;
}
.container:hover .inner-div {
/* specifies the animation name */
animation-name: move-to-right;
/* specifies the animation duration */
animation-duration: 3s;
/* repeats the animation 2 times */
animation-iteration-count: 2;
/* alternates the animation in forward and backward direction */
animation-direction: alternate;
}
@keyframes move-to-right {
0% {
top: 0%;
left: 0%;
}
100% {
top: 0%;
left: 85%;
}
}
Browser Output
Hover the pink container to see animation. The animation repeats 2 times in alternate directions: forward and backward respectively.
In the above example,
animation-direction: alternate;
moves the animation in alternate direction: forward and backward respectively.
Note: The
animation-iteration-count property should be set to a
minimum value of 2 to visualize the
animation-direction property.
If the value is set to 1, the animation will only be
played once, and the animation-direction property will have
no effect.
CSS animation-timing-function Property
The animation-timing-function property specifies how the
intermediate property values are calculated during the animation duration.
The animation-timing-function property has the following
values:
-
ease: animation starts slow, accelerates in between, ends slowly ease-in: animation starts slow and ends fastease-out: animation starts fast and ends slowly-
ease-in-out: animation starts slow, accelerates fast, and ends slowly -
linear: constant pace throughout the animation duration -
cubic-bezier(n, n, n, n): allows to define the animation speed manually
Let's see an example,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Animation Speed</title>
</head>
<body>
<p>
Hover the pink container to visualize effect of different
animation-timing-function values.
</p>
<div class="container">
<div class="box box-1">ease</div>
<div class="box box-2">ease-in</div>
<div class="box box-3">ease-out</div>
<div class="box box-4">ease-in-out</div>
<div class="box box-5">linear</div>
<div class="box box-6">cubic-bezier</div>
</div>
</body>
</html>
.container {
max-width: 700px;
background-color: pink;
}
.container > div {
width: 100px;
border: 1px solid black;
background-color: orange;
font-weight: bold;
margin-bottom: 20px;
position: relative;
}
/* adds animation after hovering the container div element */
.container:hover div {
/* specify the animation name */
animation-name: move-to-right;
/* specify the animation duration */
animation-duration: 5s;
}
@keyframes move-to-right {
0% {
left: 0;
}
100% {
left: 85%;
}
}
/* specifies the timing function for the first div */
div.box-1 {
animation-timing-function: ease;
}
/* specifies the timing function for the second div */
div.box-2 {
animation-timing-function: ease-in;
}
/* specifies the timing function for the third div */
div.box-3 {
animation-timing-function: ease-out;
}
/* specifies the timing function for the fourth div */
div.box-4 {
animation-timing-function: ease-in-out;
}
/* specifies the timing function for the fifth div */
div.box-5 {
animation-timing-function: linear;
}
/* specifies the timing function for the sixth div */
div.box-6 {
animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}
Browser Output
Hover the pink container to visualize effect of different animation-timing-function values.
The above example illustrates the different animation speed of different timing function.
CSS animation-fill-mode Property
The animation-fill-mode property decides how the animation
applies to an element before and after the animation.
By default, the animation only affects the targetted element during the animation duration.
The animation-fill-mode property has the following possible
values:
-
none: no styles are applied before and after the animation (default value) -
forwards: styles of the last keyframes are applied after the animation -
backwards: styles of the first keyframe are applied after the animation -
both: applies styles both before and after the animation
Let's see an example,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Animation Mode</title>
</head>
<body>
<p>
Hover this container to look effect of animation-fill-mode values.
</p>
<div class="container">
<div class="box box-1">forwards</div>
<div class="box box-2">backwards</div>
<div class="box box-3">both</div>
<div class="box box-4">none</div>
</div>
</body>
</html>
.container {
max-width: 700px;
background-color: pink;
}
.container > div {
width: 100px;
border: 1px solid black;
background-color: orange;
font-weight: bold;
margin-bottom: 20px;
position: relative;
}
/* adds animation after hovering the container div element */
.container:hover div {
/* specify the animation name */
animation-name: move-to-right;
/* specify the animation duration */
animation-duration: 5s;
}
@keyframes move-to-right {
0% {
left: 0;
background-color: red;
}
100% {
left: 85%;
background-color: yellow;
}
}
/* specifies the animation fill mode for first div */
div.box-1 {
animation-fill-mode: forwards;
}
/* specifies the animation fill mode for second div */
div.box-2 {
animation-fill-mode: backwards;
}
/* specifies the animation fill mode for third div */
div.box-3 {
animation-fill-mode: both;
}
/* specifies the animation fill mode for fourth div */
div.box-4 {
animation-fill-mode: none;
}
Browser Output
Hover this container to look effect of animation-fill-mode values.
The above example illustrates the effect of the animation-fill-mode property.
CSS animation Property
The animation property is a shorthand property that combines
multiple animation-related properties into a single declaration.
The syntax of the animation property is as follows:
animation: animation-name duration timing-function delay iteration-count direction fill-mode;
Let's see an example,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS animation Property</title>
</head>
<body>
<p>Hover over the pink container to start animation.</p>
<div class="container">
<div class="inner-div"></div>
</div>
</body>
</html>
.container {
max-width: 700px;
height: 150px;
padding: 20px;
background-color: pink;
}
.inner-div {
width: 100px;
height: 140px;
background: linear-gradient(to right, orange, red);
position: relative;
}
.container:hover .inner-div {
/* shorthand animation property */
animation: animate-div 2s ease-in-out 0.1s 3 alternate forwards;
}
@keyframes animate-div {
0% {
left: 0%;
}
100% {
left: 80%;
}
}
Browser Output
Hover over the pink container to start animation.
In the above example,
animation: rotate-div 4s linear 2s 4 normal forwards;
is equivalent to,
animation-name: rotate-div;
animation-duration: 4s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: 4;
animation-direction: normal;
animation-fill-mode: forwards;
Note: The transition property is used to
create basic animations that transition smoothly between two states: an
initial state and a final state.
However, it doesn't support intermediate steps or multiple keyframes,
unlike the animation property.