CSS animation property
The animation property in CSS is a shorthand property used to define animations for elements. It allows you to specify multiple aspects of an animation in one line, making it easier to manage and apply animations to elements.
Syntax
element {
animation: [name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode] [play-state];
}
Here's a breakdown of each part:
name: The name of the@keyframesanimation to be applied. This defines the keyframes of the animation.duration: The length of time the animation takes to complete one cycle, specified in seconds (s) or milliseconds (ms).timing-function: Describes how the animation progresses over time. Common values includelinear,ease,ease-in,ease-out,ease-in-out, and cubic-bezier functions.delay: The amount of time to wait before starting the animation, specified in seconds or milliseconds.iteration-count: The number of times the animation should repeat. It can be a specific number orinfinitefor an endless loop.direction: Specifies whether the animation should play forward, backward, or alternate. Values includenormal,reverse,alternate, andalternate-reverse.fill-mode: Defines the styles applied to the element before and after the animation. Values includenone,forwards,backwards, andboth.play-state: Controls whether the animation is running or paused. Values arerunningandpaused.
Example
@keyframes example {
from {
background-color: red;
transform: translateX(0);
}
to {
background-color: blue;
transform: translateX(100px);
}
}
.box {
width: 100px;
height: 100px;
background-color: red;
animation: example 2s ease-in-out 1s infinite alternate;
}
Explanation:
@keyframes example:- Defines the keyframes for the animation named
example. - At the start (
from), the background color is red, and the element is at its original position. - At the end (
to), the background color changes to blue, and the element moves 100px to the right.
- Defines the keyframes for the animation named
.box:- Applies the
exampleanimation with the following settings:2s: The animation duration is 2 seconds.ease-in-out: The animation timing function makes it start slow, speed up in the middle, and slow down at the end.1s: There is a 1-second delay before the animation starts.infinite: The animation will repeat indefinitely.alternate: The animation will alternate between forward and reverse directions on each iteration.
- Applies the
Key Properties Explained
@keyframes:- Defines the animation states. You specify what happens at various points in the animation timeline (e.g.,
0%,50%,100%).
- Defines the animation states. You specify what happens at various points in the animation timeline (e.g.,
animation-name:- Refers to the name of the
@keyframesanimation.
animation-name: example;- Refers to the name of the
animation-duration:- Sets how long the animation takes to complete.
animation-duration: 2s;animation-timing-function:- Defines the speed curve of the animation.
animation-timing-function: ease-in-out;animation-delay:- Specifies the delay before the animation starts.
animation-delay: 1s;animation-iteration-count:- Sets how many times the animation should run.
animation-iteration-count: infinite;animation-direction:- Specifies whether the animation should run forward, backward, or alternate.
animation-direction: alternate;animation-fill-mode:- Determines how the element styles should be applied before and after the animation.
animation-fill-mode: forwards;animation-play-state:- Controls whether the animation is running or paused.
animation-play-state: paused;
Practical Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Example</title>
<style>
@keyframes slide {
from {
transform: translateX(0);
}
to {
transform: translateX(300px);
}
}
.animated-box {
width: 100px;
height: 100px;
background-color: orange;
animation: slide 3s ease-in-out 1s infinite alternate;
}
</style>
</head>
<body>
<div class="animated-box"></div>
</body>
</html>
- Explanation:
- The
.animated-boxelement will move horizontally from its original position to 300px to the right, with a 3-second duration for each cycle. - The animation starts 1 second after the element appears and repeats indefinitely, alternating directions with each iteration.
- The