| Introduction to CSS |
|---|
| Text and Font Styling |
|---|
| Box Model and Layout |
|---|
| Advanced Layout with Flexbox and Grid |
|---|
| Responsive Design |
|---|
| CSS Transitions and Animations |
|---|
The animation-name property in CSS is used to specify the name of the keyframe animation to be applied to an element. Keyframe animations define the stages of an animation using @keyframes, and the animation-name property links these keyframes to the element.
Syntax
animation-name: none | keyframe-name;
- ‘
none‘: No animation is applied (this is the default). - ‘
keyframe-name‘: The name of the ‘@keyframes‘ rule that defines the animation.
Example 1: Basic Usage
Step 1: Define the Keyframes
Let’s create a simple animation that changes the background color of a div element.
@keyframes changeColor {
0% { background-color: red; }
50% { background-color: yellow; }
100% { background-color: green; }
}
Step 2: Apply the Animation to an Element
div {
width: 100px;
height: 100px;
animation-name: changeColor;
animation-duration: 4s;
}
HTML
<div></div>
In this example, the div element will animate its background color from red to yellow to green over a duration of 4 seconds.
Example 2: Multiple Keyframes and Animations
You can also use multiple keyframe animations on a single element by separating their names with commas.
Step 1: Define Multiple Keyframes
@keyframes moveRight {
0% { transform: translateX(0); }
100% { transform: translateX(100px); }
}
@keyframes changeColor {
0% { background-color: red; }
100% { background-color: blue; }
}
Step 2: Apply Multiple Animations
div {
width: 100px;
height: 100px;
animation-name: moveRight, changeColor;
animation-duration: 2s, 4s;
}
HTML
<div></div>
In this example, the div element will move to the right over 2 seconds while changing its background color from red to blue over 4 seconds.
Example 3: Shorthand Property
The ‘animation‘ shorthand property can be used to set multiple animation properties at once, including ‘animation-name‘.
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-50px); }
}
div {
width: 100px;
height: 100px;
background-color: green;
animation: bounce 2s infinite;
}
HTML
<div></div>
In this example, the ‘div‘ element will “bounce” up and down indefinitely with a duration of 2 seconds for each cycle.
Summary
- The
animation-nameproperty links an element to a specific keyframe animation. - Keyframe animations are defined using
@keyframes. - The
animationshorthand property can be used to set multiple animation properties, includinganimation-name, in one line. - Multiple animations can be applied to an element by separating their names with commas.
