@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. This is 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, and your progress syncs across the web and the CoddyKit app. The Frontend Academy course includes 4 lessons in total.
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.
Learn HTML with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 41
- Lessons
- 163
Frequently Asked Questions
Is the “@keyframes Animations” lesson free?
Yes — the full text of “@keyframes Animations” is free to read here on the web. 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. The Frontend Academy course includes 4 lessons in total.
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, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 4.
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.
All lessons in this course
- CSS Custom Properties: declaring and updating
- Transitions: property duration timing
- @keyframes Animations
- Respecting prefers-reduced-motion