So far you’ve worked through HTML, CSS, and JavaScript. Starting now, you’ll use those skills to add “motion” to a page.
Why do we need motion?
When you move your cursor over a button, a color that snaps over instantly feels quite different from one that softly shifts. When there’s motion —
- It’s easier to notice (you can tell “this is clickable” or “this just changed”)
- It feels good (the screen seems to respond to what you do)
- It’s clearer (when a menu “slides” open, your eyes can follow where it came from)
Try moving your cursor over the button below. It really moves.
This is transition (the mechanism that makes things change smoothly), which we’ll be learning from here on.
Let’s hunt for “motion” around us
You actually see web animation every day. For example —
- Press the like button and the heart gives a little pop
- While something loads, a spinning mark appears
- As you scroll, a photo softly rises up from below
- Press the menu button and a list slides open
Every one is just “showing a change in appearance, spread out over time.” And you’ll learn how to make all of them in this course. Try hunting for “where does it move?” on sites and apps you visit often, and your toolbox of motion ideas will keep growing.
How is it different from a GIF or video?
If you just want “something that moves,” you could also paste in a GIF image or a video. But CSS animation has clear strengths.
| GIF / video | CSS animation | |
|---|---|---|
| Weight | The file tends to be heavy | Very light (just code) |
| Adjusting later | Needs to be remade | Just edit one line of code |
| Screen size | Blurs when enlarged | Crisp at any size |
| Reacting to a trigger | Can’t (just plays) | Can react to hover or click |
Motion that responds to what the user does, like “it moves when the cursor lands on the button,” can only be made with CSS animation.
What you’ll learn in this track
| What you learn | What it means |
|---|---|
transition | The basics of making a change smooth |
transform | Change appearance with grow, rotate, and move |
@keyframes | Repeat and chain a set motion |
| Combining with JS | Start motion at a timing like a click |
At the end, you’ll even learn how to be considerate to people who find motion hard (handling the setting that reduces motion). Not just being able to “make” motion, but being able to “deliver it comfortably” — that’s the goal of this course.
Summary of this lesson
- Animation = showing a change in appearance spread out over time
- It leads to being easier to notice, feeling good, and being clearer
- What you use is the CSS you’ve learned plus new mechanisms (
transition,@keyframes, and so on)