The animation-name
property in CSS specifies the name of the @keyframes
animation to be applied to an element. It is a crucial part of the CSS animation framework, as it links the element to the defined animation sequence created with @keyframes
.
Syntax
element {
animation-name: name;
}
name
: The name of the@keyframes
animation you want to apply to the element. This name must match the name used in the@keyframes
rule.
How It Works
Define the Keyframes:
- Create a
@keyframes
rule with a specific name. This rule contains the stages of the animation, specifying how the element should change over time.
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(100px); } }
- Create a
Apply the Animation:
- Use the
animation-name
property to reference the keyframes defined earlier.
.box { width: 100px; height: 100px; background-color: orange; animation-name: slide; animation-duration: 2s; }
- This applies the
slide
animation to the.box
element, which will move it horizontally by 100px over 2 seconds.
- Use the
Example
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Name Example</title>
<style>
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.animated-box {
width: 100px;
height: 100px;
background-color: blue;
animation-name: fadeIn;
animation-duration: 3s;
}
</style>
</head>
<body>
<div class="animated-box"></div>
</body>
</html>
Explanation:
@keyframes fadeIn
:- Defines an animation named
fadeIn
that transitions theopacity
of an element from 0 (completely transparent) to 1 (completely opaque).
- Defines an animation named
.animated-box
:- Applies the
fadeIn
animation to the element. - The
animation-name
property specifies the animation to use. - The
animation-duration
property sets the length of the animation to 3 seconds.
- Applies the
Important Points
Naming:
- The value of
animation-name
must match exactly with the name used in the@keyframes
rule. Any mismatch will result in no animation being applied.
- The value of
Multiple Animations:
- You can specify multiple animations by separating them with commas.
element { animation-name: fadeIn, slide; animation-duration: 3s, 2s; }
- In this example, the element will apply both
fadeIn
andslide
animations simultaneously, with different durations for each.
Animation References:
- You can reference the same
@keyframes
name in different elements, allowing for reuse of animations across your CSS.
- You can reference the same