Motion in CSS: transitions and animations
You add meaningful motion with transitions, keyframes and transforms and keep it fast and respectful of motion-sensitive users.
Level 301 · 15 lessons · 12 practice labs
Lessons
Transforms and transitions
- 2D transforms: translate, scale, rotate
- 3D transforms and perspective
- Transition properties and timing
- Easing curves: cubic-bezier and steps
- Short task: a button with smooth state changes
Animation
- @keyframes and animation properties
- Sequencing animations and delays
- Loading indicators and skeleton screens
- Scroll-driven animations
- Page transitions with View Transitions
- Short task: a step-by-step onboarding animation
Performance and accessibility
- Which properties are cheap to animate
- will-change and layers
- Designing for reduced motion
- Capstone: a lively yet fast landing page
Practice labs
- Scale a card on hover: Gently scale a product card with transform and deepen its shadow.
- Make a card flip effect: Write a card flip with front and back faces using perspective and backface-visibility.
- Show the effect of transform order: Prepare three examples where swapping translate and rotate changes the result and fix a menu reveal.
- Add a smooth transition to a button: Add suitably timed transitions to a button's colour, shadow and focus states.
- Choose the right easing curve: Design a cubic-bezier curve for a sliding drawer and build a frame-by-frame counter with steps.
- Make a height transition work: An accordion won't transition to height: auto; solve it with a grid row or interpolate-size and check performance.
- Build a loading spinner: Make a spinning loader with @keyframes and add accessible text.
- Animate a skeleton screen: Add a shimmer animation to skeleton cards shown until data arrives.
- Build a step-by-step intro animation: Build an intro that reveals four items in a delayed sequence with CSS alone.
- Make a scroll-linked progress bar: Write a progress bar that fills as an article is read, using a scroll timeline.
- Animate page changes with View Transitions: Build a transition where a product image glides between list and detail pages.
- Build a lively yet fast landing page: Animate Mimoza Software's landing page using only transform and opacity, honouring reduced motion.
About this course
You add meaningful motion with transitions, keyframes and transforms and keep it fast and respectful of motion-sensitive users.
What you will learn
- Transforms and transitions
- Animation
- Performance and accessibility
Prerequisites
You should be comfortable with the level 101 and 201 topics of the same path.
Lab environment
Lessons run on your own Kali Linux desktop in the browser, with the tools ready in their windowed interfaces. Nothing to install; a computer screen is recommended.
Frequently asked questions
- Is this course right for my level?
- The course is at level 301; it assumes you know the topics of the lower-level courses.
- Is there anything to install?
- No. Every lesson runs in your own lab environment that opens in the browser.
- How do lessons work?
- Each lesson has 8 to 10 steps and a short quiz. Early steps show the command to type, later steps give less help; if two attempts fail, the solution opens.
- Can I try it for free?
- Yes. The first three lessons of every course are free.