Multiple Animations
Apply multiple animations to one element by separating them with commas. Each runs independently with its own duration, delay, and iteration count.
CSS
Intermediate
4 min read
Multiple Animations on One Element
Example
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.floating-badge {
animation:
fadeIn 0.3s ease forwards,
float 3s ease-in-out 0.3s infinite;
} Pro Tip
Compose simple animations rather than creating one complex keyframe — easier to maintain and reuse separately.