- Scene
- 04
- Take
- 01
- Level
- Beginner
- Runtime
- ~2 h
Transforms and Keyframe Animations
Move, turn and scale things with transforms, then write multi-step animations with @keyframes: fill modes, steps(), composition, events, and the Lumen toast.
A transition goes from one state to another when something changes. A keyframe animation does more: you write the states yourself, in as many steps as you like, and it can start on its own, repeat, run backwards and play several at once. This phase teaches @keyframes and the animation property in full, together with transforms, the properties you will animate most.
Every animation has edges that surprise people: what the element looks like before it starts and after it ends (fill mode), what happens when you remove the class half way (a cancel, not an end), what happens when two animations want the same property, and what steps() really counts. Each one is shown live and read off the Motion Timeline, so you see numbers, not guesses.
You finish by giving the launch page its first real piece of feedback: a toast that slides in when an accessory is added, waits, leaves, and removes itself, calmly for people who asked for less motion.
▶ Roll: 4.1Scene 04 · the brief from Lumen
Lena, QA at Lumen Bikes
“I pressed Add three times and the page said nothing. I had no idea any of them worked.”
Lena has a rule: if she cannot tell that something worked, it did not work. On the launch page the cart count goes up by one, in the corner, in one frame, far from the button she just pressed. Twice she pressed Add again, because nothing near her finger changed.
Ama asks Kofi for a toast: a small message near the bottom of the screen that says "Lock added to cart", comes in with a little slide, waits a moment and leaves. Mei sends the spec. It slides up 16 pixels over 220 ms, leaves in 120 ms, and has no slide at all for Ravi: a fade.
Kofi knows the pieces: a transform to move it, keyframes to run it, and an event to know when it is over. He also knows where toasts go wrong: two at once, one dismissed early, one that never leaves. In this phase you learn the pieces and build the toast with all three cases handled.
In this scene
You will learn
- Move, turn and scale an element with transforms, and say in what order they apply
- Write @keyframes and control an animation with the animation properties: fill mode, direction, iterations, steps(), composition and play state
- Know which events an animation fires, and what you get when it is cancelled
- Build the launch page's toast, with two in a row, early dismissal and reduced motion
You write code in
In your lumen-motion project (npm run dev) and in the editor on this page
Files you touch
- index.html
- src/styles/components.css
- src/js/main.js
- src/js/components/toast.js
Shot list · 6 shots, widths by reading time
- 4.1Transforms for Motion
translate,scaleandrotatemove, resize and turn an element without changing the page layout. The order of the functions changes the result, the individual properties have a fixed order, and a few elements (inline boxes, SVG shapes) behave differently. 22 min 2 live - 4.2@keyframes and the animation Property
@keyframeslists the states an animation passes through, and theanimationproperty starts it and sets its timing. Missing stops and missing names have exact, predictable results. 19 min 2 live - 4.3Fill Mode, Direction and IterationsFill mode decides what an element looks like before an animation starts and after it ends. Direction, iteration count and a negative delay decide where and how it runs. 19 min 2 live
- 4.4steps() and Sprite Sheets
steps(n)replaces a smooth easing with n jumps. It is how sprite sheets, ticking clocks and typewriters work, and the four jump terms decide whether the first and last values are ever shown. 21 min 2 live - 4.5Composition, Play State and Events
animation-compositiondecides how an animation combines with the element's own value and with other animations.animation-play-statepauses it. Four events report its life, includinganimationcancelwhen it is cut short. 22 min 3 live - 4.6Build: The Toast NotificationbuildGive the launch page its first feedback message: a toast that slides in when an accessory is added, waits, leaves, and removes itself. It handles two toasts in a row, a toast removed early, and reduced motion. 34 min 2 live
Dailies · 5 checked exercises
A film crew watches the day's shots every evening. Build each one yourself and press Check: the page freezes its clock and checks your motion at exact moments, its cost, and its reduced-motion version.
ease-out.BeginnerD03Stop the snap-back and the flashPress Slide. The box waits half a second, jumps to 40 px, slides to 160 px, then snaps back to 0. It should sit at 40 px during the wait and stay at 160 px at the end.BeginnerD04Tick the clockThe clock hand turns smoothly. Make it tick: it should jump 30° once every second, one full turn every 12 seconds, starting at 0°.BeginnerD05A toast that removes itself (launch page)Part of Topic 4.6. The CSS is done. Write showToast(message, { duration }) in the JavaScript: it adds a .toast with the message to #toasts, and after duration ms adds the class leaving.Beginner