Intermediate LevelCSS & Modern Layouts
How do CSS @keyframes animations work for multi-step effects?
❓ Interview Prompt: Explain @keyframes syntax, animation properties, timing functions, and performance considerations.
CSS @keyframes define multi-step animations with named waypoints:
@keyframes Syntax:
```
@keyframes name {
0% { / start state / }
50% { / midpoint state / }
100% { / end state / }
}
```
Animation Properties:
•
animation-name: References the @keyframes name.•
animation-duration: Total time (e.g. 0.5s, 300ms).•
animation-timing-function: ease, linear, cubic-bezier().•
animation-delay: Wait before starting.•
animation-iteration-count: 1 (default), infinite.•
animation-fill-mode: forwards (keep end state), backwards, both.•
animation-direction: normal, reverse, alternate.Code Implementation Example
css
@keyframes fadeSlideUp {
0% { opacity: 0; transform: translateY(20px); }
100% { opacity: 1; transform: translateY(0); }
}
.card {
animation: fadeSlideUp 0.4s ease-out forwards;
}
/* Staggered delay for multiple cards */
.card:nth-child(1) { animation-delay: 0ms; }
.card:nth-child(2) { animation-delay: 100ms; }
.card:nth-child(3) { animation-delay: 200ms; }
/* Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
.card { animation: none; }
}💡Fade-slide animation with staggered delays and motion preference respect.
🎯 Interview Key Takeaway
Always wrap animations in @media (prefers-reduced-motion) checks for accessibility compliance.
#Keyframes#Animation#Motion#Intermediate
Back to all CSS & Modern Layouts Questions→