Motion and interaction
Good motion helps people understand what is happening. These terms cover how animation is written, how to make it feel right and how to keep it safe and fast.
Not yet reviewedLevel
Resources
Terms
- BeginnerTransitionA CSS transition animates a property from one value to another over a set time when it changes.Not yet reviewed
- BeginnerKeyframe animationKeyframe animations use @keyframes to describe the steps of an animation, which can repeat and run on their own.Not yet reviewed
- BeginnerEasingEasing is the curve that controls how an animation speeds up and slows down over its duration.Not yet reviewed
- BeginnerMicro-interactionA micro-interaction is a small, single purpose response to an action, like a heart filling in when you like something.Not yet reviewed
- IntermediateScroll-driven animationScroll driven animation ties an animation's progress to scroll position instead of time.Not yet reviewed
- IntermediateSpring animationSpring animation models motion on a physical spring, with stiffness, damping and mass, instead of a fixed duration and curve.Not yet reviewed
- IntermediateReduced motionReduced motion is a user setting, available in code as the prefers-reduced-motion media feature, that asks interfaces to limit movement.Not yet reviewed
- IntermediateAnimation performanceAnimations stay smooth when they change properties the browser can handle without recalculating layout, mainly transform and opacity.Not yet reviewed
Articles
An Interactive Guide to CSS Transitions
An interactive guide that builds up transitions, timing and performance step by step.
Tools
Easing Functions Cheat Sheet
A visual cheat sheet for choosing easing curves, with CSS values ready to copy.
Know more about Motion and interaction?
Suggest a term, a change, or a resource. No account needed.
Suggest a change