Animation is a great way to make your web page more attractive. CSS animation property allows the animation of HTML elements without using JavaScript.
What is a CSS Animation?
An animation lets an element gradually change from one style to another one. You can change as many CSS properties you want, as many times you want. To use CSS animation, you must first specify some keyframes for the animation.
The CSS animation property is shorthand of the following properties:
The @keyframes Rule
The main component of CSS Animation is @keyframes – the CSS rule where animation is created. Inside @keyframes, you can define the stages and settings of the animation.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.example-1 {
width: 100px;
height: 100px;
background-color: #2a9d8f;
animation-name: example-1;
animation-duration: 4s;
}
@keyframes example-1 {
from {background-color: #2a9d8f;}
to {background-color: #e9c46a;}
}
</style>
</head>
<body>
<div class="example-1"></div>
</body>
</html>Note: The animation will finish in 4 seconds. It will gradually change the background color of the <div> element from “green” to “yellow”. After the animation, the square changes back to its original color.
Output:
Click on the square to repeat the animation.
The animation-duration property defines how long time an animation should take to complete. If the animation-duration property is not specified, no animation will occur, because the default value is 0 seconds.
The following example will change the background and the position of the <div> element when the animation is 50% complete, and again when the animation is 100% complete:
<!DOCTYPE html>
<html>
<head>
<style>
.square {
width: 100px;
height: 100px;
background-color: #2a9d8f;
position: relative;
animation-name: example-2;
animation-duration: 4s;
}
@keyframes example-2 {
0% {background-color:#2a9d8f; left:0px;}
50% {background-color:#f4a261; left:200px;}
100% {background-color:#2a9d8f; left:0px;}
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>Output:
Click on the square to repeat the animation.
The animation-delay property specifies a delay for the start of an animation.
Example (the animation will start with 2 seconds delay):
<!DOCTYPE html>
<html>
<head>
<style>
.square {
width: 100px;
height: 100px;
background-color: #2a9d8f;
position: relative;
animation-name: example-3;
animation-duration: 4s;
animation-delay: 2s;
}
@keyframes example-3 {
0% {background-color:#2a9d8f; left:0px;}
50% {background-color:#f4a261; left:200px;}
100% {background-color:#2a9d8f; left:0px;}
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>Output:
Click on the square to repeat the animation.
The animation-iteration-count property specifies the number of times an animation should run. Using the value “infinite” you will make the animation continue forever.
Example (the animation will repeat 3 times):
<!DOCTYPE html>
<html>
<head>
<style>
.square {
width: 100px;
height: 100px;
background-color: #2a9d8f;
position: relative;
animation-name: example-3;
animation-duration: 4s;
animation-iteration-count: 3;
}
@keyframes example-3 {
0% {background-color:#2a9d8f; left:0px;}
50% {background-color:#f4a261; left:200px;}
100% {background-color:#2a9d8f; left:0px;}
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>Output:
Click on the square to repeat the animation.
The animation-direction property specifies whether the animation should be played forward, backward, or in alternate cycles.
Demo:
The animation-direction property can have the following values:
normal (default) – the animation is played as normal (forward).
reverse – the animation is played in the reverse direction (backward).
alternate – the animation is played in forward first, then backward.
alternate-reverse – the animation is played backward first, then forward.
Example (using the “reverse” value):
<!DOCTYPE html>
<html>
<head>
<style>
.square {
width: 100px;
height: 100px;
background-color: #2a9d8f;
position: relative;
left:200px;
animation-name: example-5;
animation-duration: 4s;
animation-direction: reverse;
}
@keyframes example-5 {
0% {background-color:#2a9d8f; left:200px;}
25% {background-color:#e76f51; left:0px;}
50% {background-color:#e9c46a; left:200px;}
75% {background-color:#f4a261; left:0px;}
100% {background-color:#2a9d8f; left:200px;}
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>Output:
Click on the square to repeat the animation.
The animation-timing-function property specifies the speed curve of animation.
The animation-timing-function property can have the following values:
ease – specifies an animation with a slow start, then fast, then and slowly. This is the default.
linear – specifies an animation with the same speed from start to end.
ease-in – specifies an animation with a slow start.
ease-in-out – specifies an animation with a slow start and end.
CSS animations do not affect an element before the first keyframe is played or after the last keyframe is played. The animation-fill-mode property can override this behavior.
The animation-fill-mode property specifies a style for the target element when the animation is not playing.
The animation-fill-mode property can have the following values:
none – the default one. The animation will not apply any styles to the element before or after it is executing.
forwards– the element will retain the style values that are set by the last keyframe.
backwards– the element will get the style values that are set by the first keyframe.
both – the animation will follow the rules for both forwards and backwards, extending the animation properties in both directions.
Example(square will move 200px to the left and will stay in this position):
<!DOCTYPE html>
<html>
<head>
<style>
.square {
width: 100px;
height: 100px;
background-color: #2a9d8f;
position: relative;
animation-name: example-6;
animation-duration: 2s;
animation-timing-function: ease;
animation-fill-mode: forwards;
}
@keyframes example-6 {
0% {background-color:#2a9d8f; left:0px;}
100% {background-color:#2a9d8f; left:200px;}
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>Output:
Click on the square to repeat the animation.
I hope you find it useful.
Enjoy coding!
Read also: