The CSS animation property is used to specify the animation that should be applied to an element. The animation property is a shorthand for several other CSS properties that control different aspects of the animation.
Syntax:
animation: animation-name animation-duration
animation-timing-function animation-delay
animation-iteration-count animation-direction
animation-fill-mode animation-play-state;Property Values:
- animation-name: It is used to specify the name of the @keyframes describing the animation.
- animation-duration: It is used to specify the time duration and it takes animation to complete one cycle.
- animation-timing-function: It is used to specify how the animation makes transitions through keyframes.
- animation-delay: It is used to specify the delay when the animation starts.
- animation-iteration-count: It is used to specify the number of times the animation will repeat. It can specify as infinite to repeat the animation indefinitely.
- animation-direction: It is used to specify the direction of the animation.
- animation-fill-mode: It is used to specify what values are applied by the animation before and after it is executed.
- animation-play-state: It is used to allow you to play/pause the animation.
Example 1: The following code demonstrates the animation property using @keyframes rules.
HTML
<!DOCTYPE html> <html>
<head>
<title> CSS animation Property </title>
<style>
h1 {
color: green;
}
#imageID {
width: 400px;
height: 100px;
position: relative;
animation: GFG 5s linear 1s infinite alternate;
}
@keyframes GFG {
0% {
left: 0px;
top: 0px;
}
25% {
left: 200px;
top: 200px;
}
50% {
left: 200px;
top: 0px;
}
75% {
left: 0px;
top: 200px;
}
100% {
left: 0px;
top: 0px;
}
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>CSS animation Property</h3>
<img src=
id="imageID">
</body>
</html>
|
Output:
Example 2: The following code demonstrates the CSS @keyframes rule with the name “circle”.
HTML
<!DOCTYPE html> <html>
<head>
<title>
CSS animation Property
</title>
<style>
div {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: red;
animation: circle 8s infinite;
}
@keyframes circle {
0% {
background-color: red;
}
25% {
background-color: yellow;
}
50% {
background-color: blue;
}
100% {
background-color: green;
}
}
</style>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>CSS animation Property</h3>
<div></div>
</body>
</html>
|
Output:
Supported Browsers:
- Chrome 43
- Edge 12
- Firefox 16
- Opera 30
- Safari 9