Lesson Goal
Animation is the controlled change of visual properties over time. It can change position, scale, opacity, rotation, color, and more. In web interfaces, animation can make a page feel alive, explain change, guide attention, and improve feedback.
Core memory trick
Transitions react. Keyframes perform.
By the end of this lesson
- You will know when to use transitions.
- You will know when to use keyframes.
- You will control duration, delay, easing, iteration, and direction.
- You will build practical UI animation pieces.
Embedded HTML Preview Editor
Use this editor to paste animation examples from this lesson, change the code, and preview the result live. It is useful for experiments, student exercises, and custom motion practice.
Programmer's Picnic HTML Preview Editor
Suggested student workflow
- Copy a code example from a lesson section.
- Paste it into the editor.
- Run the preview.
- Change duration, easing, keyframes, or direction and compare the result.
Level 0 — What Animation Really Is
Animation means changing something smoothly over time.
| Property | What can happen |
|---|---|
| transform | Move, rotate, scale, skew |
| opacity | Fade in and fade out |
| background | Color change |
| box-shadow | Glow and highlight effects |
Core Ideas — Transition vs Keyframes
Transitions
A transition is great when an element changes because of an event like hover, focus, click, or class change.
Keyframes
Keyframes are great when you want motion that runs through defined steps, often without waiting for hover.
.box{
transition: transform .3s ease, box-shadow .3s ease;
}
.box:hover{
transform: scale(1.15);
}@keyframes bounceY{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-70px)}
}
.box{
animation: bounceY 1s ease-in-out infinite;
}Simple difference
Use transitions for reactions. Use keyframes for designed motion sequences.
Animation Demo Gallery
These are some of the most useful beginner-to-intermediate animation patterns.
What to observe
- Move uses translation.
- Spin uses rotation.
- Bounce uses repeated vertical translation.
- Pulse uses scale.
- Fade slide uses opacity plus movement together.
Interactive Animation Lab
Change the controls and watch the animation update live.
Pick an animation type, change duration and timing, then restart the animation.
#labBox{
animation: moveX 1.8s ease-in-out 0s infinite alternate forwards;
animation-play-state: running;
}
Custom Keyframe Lab
Write your own keyframes and preview them on the box below.
How this helps
This is where students stop copying and start designing motion themselves.
Important Animation Properties
| Property | Meaning |
|---|---|
| animation-name | Which keyframes to run |
| animation-duration | How long one cycle takes |
| animation-delay | How long to wait before starting |
| animation-iteration-count | How many times it runs |
| animation-direction | Whether it reverses between cycles |
| animation-timing-function | Speed curve of the motion |
| animation-fill-mode | How styles behave before and after the animation |
| animation-play-state | Run or pause the animation |
CSS Animation vs JavaScript Animation
CSS Animation
- Great for UI motion
- Simple and readable
- Best for hover, loaders, cards, entrances
- Very easy to maintain
JavaScript Animation
- Best when animation depends on logic or physics
- Useful for canvas, games, complex sequencing
- Can react to data and runtime conditions
- Often uses requestAnimationFrame
let x = 0;
const box = document.getElementById("box");
function animate() {
x += 2;
box.style.transform = `translateX(${x}px)`;
if (x < 200) {
requestAnimationFrame(animate);
}
}
animate();Mini Projects
These mini pieces show how animation appears in real web products.
Project lesson
Animation becomes powerful when it supports purpose: loading, alerting, highlighting, and guiding attention.
Expert-Level Thinking
Expert animation is not about making everything move. It is about making the right thing move at the right time.
Use motion for feedback
Buttons, cards, and form states should feel responsive, not noisy.
Guide the eye
Entrance animations and pulses can tell the user where to look.
Respect comfort
Strong motion should be used carefully and never everywhere at once.
Professional checklist
- Prefer transforms and opacity for smooth motion.
- Use easing that matches the feeling you want.
- Keep hover motion short and responsive.
- Reserve infinite loops for specific jobs like loaders and ambient motion.
- Combine animation with purpose, not decoration alone.
Practice Tasks
Beginner tasks
- Make a button grow slightly on hover.
- Create a spinning loader.
- Create a bouncing ball.
- Make a box fade in from below.
Advanced tasks
- Create a hero section with floating badges.
- Make an animated card hover system.
- Design a custom keyframe sequence of your own.
- Build a small dashboard with subtle motion only where needed.
Final Summary
- Transitions are for reactions.
- Keyframes are for motion sequences.
- Timing and easing matter as much as the movement itself.
- Animation should help the interface communicate.
- Expert animation is purposeful, not excessive.