Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
CSS animation-name property
The CSS animation-name property specifies the name of the @keyframes animation to apply to an element. This property links an element to its corresponding keyframe animation definition.
Syntax
selector {
animation-name: keyframe-name;
}
Possible Values
| Value | Description |
|---|---|
keyframe-name |
Name of the @keyframes animation to apply |
none |
No animation is applied (default) |
Example: Color Animation
The following example demonstrates how to use the animation-name property to apply a color transition animation −
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 200px;
background-color: yellow;
animation-name: myanim;
animation-duration: 3s;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes myanim {
from {
background-color: green;
}
to {
background-color: blue;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
A rectangular box starts with yellow background, waits 2 seconds, then continuously animates between green and blue colors over 3-second intervals.
Example: Multiple Animations
You can apply multiple animations by separating animation names with commas −
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
animation-name: slideMove, colorChange;
animation-duration: 2s, 1s;
animation-iteration-count: infinite;
}
@keyframes slideMove {
0% { transform: translateX(0); }
50% { transform: translateX(200px); }
100% { transform: translateX(0); }
}
@keyframes colorChange {
0% { background-color: red; }
50% { background-color: orange; }
100% { background-color: red; }
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
A red box continuously moves left and right while simultaneously changing colors between red and orange.
Conclusion
The animation-name property is essential for connecting elements to their @keyframes animations. You can apply single or multiple animations to create complex visual effects on web pages.
Updated on: 2026-03-15T12:43:18+05:30
102 Views
Advertisements