@keyframes Animations
Define multi-step animations with @keyframes, attach them with animation shorthand, and control iteration, direction, and fill-mode.
Transitions vs Animations
Transitions animate between two states triggered by a change. @keyframes animations run automatically, can loop, reverse, play infinitely, and define multiple intermediate steps — no trigger required.
Defining @keyframes
Declare an animation sequence with @keyframes. Define states at percentages (0%, 50%, 100%) or using from and to keywords.
@keyframes fadeIn {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}