The animation-name CSS property specifies the name of one or more @keyframes at-rules that define the animation to be applied to an element. These keyframes dictate the element's appearance and position at various points during the animation's sequence. Once a name is assigned, you can then use other animation properties to control the timing, duration, and behavior of the animation.
Example 1: Simple Color Change
/* Define the keyframes for the color change animation */
@keyframes colorChange {
from {
background-color: steelblue;
}
to {
background-color: lightcoral;
}
}
/* Apply the animation to the element */
.box-1 {
width: 100px;
height: 100px;
animation-name: colorChange; /* Specifies the animation's name */
animation-duration: 4s;
animation-iteration-count: infinite;
}
Explanation This code defines an animation named colorChange using @keyframes. The .box-1 class then applies this animation by referencing its name with the animation-name property, causing the element's background color to transition from steelblue to lightcoral over four seconds, repeating infinitely.
Example 2: Fading In and Out
/* Keyframes to control the opacity for a fade effect */
@keyframes fadeInOut {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
/* Applying the fade animation */
.box-2 {
width: 100px;
height: 100px;
background-color: #333;
animation-name: fadeInOut; /* Assigns the named keyframe rule */
animation-duration: 5s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
Explanation The fadeInOut keyframes manipulate the opacity of an element. The .box-2 selector uses animation-name to apply the fadeInOut animation, making the element fade in for the first half of the 5-second duration and then fade out during the second half.
Example 3: Rotational Movement
/* Define the keyframes for a full rotation */
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* Apply the spinning animation */
.icon-spin {
font-size: 3rem;
color: dodgerblue;
animation-name: spin; /* Sets the animation to our 'spin' keyframes */
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
Explanation Here, the @keyframes named spin creates a rotation effect using the transform property. The animation-name: spin; rule assigns this animation to the .icon-spin class, causing any element with this class to rotate continuously.
Example 4: Pulsing Effect
/* Keyframes to create a pulsing size effect */
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
/* Apply the pulsing animation to a button */
.button-pulse {
padding: 15px 30px;
border: none;
background-color: #ff5722;
color: white;
animation-name: pulse; /* Links to the 'pulse' keyframe definition */
animation-duration: 1.5s;
animation-iteration-count: infinite;
}
Explanation The pulse keyframes use transform: scale() to make the element grow slightly and then return to its original size. The .button-pulse class applies this animation via the animation-name property, creating an attention-grabbing pulse effect.
Example 5: Multiple Animation Names
/* First animation: sliding right */
@keyframes slideRight {
from { left: 0; }
to { left: 200px; }
}
/* Second animation: changing color */
@keyframes colorShift {
from { background-color: gold; }
to { background-color: rebeccapurple; }
}
/* Applying multiple animations */
.box-5 {
width: 50px;
height: 50px;
position: relative;
animation-name: slideRight, colorShift; /* Comma-separated list of names */
animation-duration: 3s, 5s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Explanation This example demonstrates applying multiple animations to a single element. The animation-name property accepts a comma-separated list of keyframe names (slideRight, colorShift), allowing the element to simultaneously move horizontally and change color.