@keyframes Animations
Define multi-step animations with @keyframes, attach them with animation shorthand, and control iteration, direction, and fill-mode.
@keyframes Animations is a free Frontend Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
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); }
}The animation Shorthand
animation: name duration timing-function delay iteration-count direction fill-mode. Apply the animation to an element with this shorthand.
.card {
animation: fadeIn 0.4s ease-out forwards;
}
.loader {
animation: pulse 1.5s ease-in-out infinite;
}animation-iteration-count
Sets how many times the animation plays. infinite loops forever. A number plays exactly that many times.
.spinner {
animation: spin 1s linear infinite;
}
.badge {
animation: bounce 0.6s ease 3; /* plays 3 times */
}animation-direction
normal (default): forward each time. reverse: backwards. alternate: forward then backward. alternate-reverse. Alternate is great for ping-pong effects.
@keyframes swing {
from { transform: rotate(-15deg); }
to { transform: rotate(15deg); }
}
.pendulum {
animation: swing 1s ease-in-out infinite alternate;
}animation-fill-mode
Controls the element's state before and after the animation. forwards: element stays at the final keyframe state. backwards: applies the from state during the delay. both: both.
.entrance {
opacity: 0;
animation: fadeIn 0.5s ease 0.2s forwards;
/* stays visible (opacity: 1) after animation ends */
}animation-play-state
Pause and resume animations with JavaScript by toggling animation-play-state: paused | running.
// Pause:
element.style.animationPlayState = 'paused';
// Resume:
element.style.animationPlayState = 'running';Multiple Animations
Apply multiple animations to one element by separating them with commas. Each animation runs independently.
.icon {
animation:
rotate 2s linear infinite,
pulse 1.5s ease-in-out infinite alternate;
}Staggered Animations with animation-delay
Stagger list items by incrementing the delay per item. CSS custom properties make this easy with JavaScript.
/* CSS */
.list-item {
animation: slideIn 0.3s ease forwards;
animation-delay: calc(var(--index) * 60ms);
}
/* JS */
list.querySelectorAll('.list-item').forEach((el, i) => {
el.style.setProperty('--index', i);
});will-change — Hint to the Browser
will-change: transform hints to the browser that the property will animate, allowing it to promote the element to its own compositor layer ahead of time. Use sparingly — too many compositor layers waste GPU memory.
.animated {
will-change: transform; /* only while animating */
}
/* Remove will-change after animation: */
el.addEventListener('animationend', () => el.style.willChange = 'auto');Practical: Skeleton Loading Screen
Skeleton screens use a shimmer animation to indicate content is loading. A gradient slides across placeholder shapes.
@keyframes shimmer {
from { background-position: -200% 0; }
to { background-position: 200% 0; }
}
.skeleton {
background: linear-gradient(
90deg,
#e2e8f0 25%,
#edf2f7 50%,
#e2e8f0 75%
) 200% 0 / 200% 100%;
animation: shimmer 1.5s linear infinite;
}Quick Check
Which animation-fill-mode value makes the element keep the final keyframe state after the animation ends?
Recap: @keyframes Animations
Define with @keyframes using from/to or percentages. Apply with animation shorthand. iteration-count for looping. alternate direction for ping-pong. fill-mode: forwards to retain final state. Stagger with animation-delay and CSS variables. Use transform and opacity keyframes for smooth composited animations.
Frequently asked questions
Is the “@keyframes Animations” lesson free?
Yes — the full text of “@keyframes Animations” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.
What will I learn in “@keyframes Animations”?
Define multi-step animations with @keyframes, attach them with animation shorthand, and control iteration, direction, and fill-mode. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Frontend Academy?
No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “@keyframes Animations” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Frontend Academy lesson?
Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.