Definition
CSS mechanisms using @keyframes to define multi-step timed sequences for element visual properties.
Why It Matters
Keyframes allow developers to create complex, performant continuous animations that guide user attention independently of state changes.
Core Concepts
@keyframes: Named animation sequences at percentage milestones.- Animation Properties:
animation-name,duration,iteration-count,direction,fill-mode,play-state.
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation-name: fade-in;
animation-duration: 2s;
animation-fill-mode: forwards;
}