101 commands · 6 cheat sheets · CSS
Motion and Transitions master quick reference
Browse 101 commands from 6 focused cheat sheets on page 1 of 1. Each example opens its matching detailed section.
Motion and Transitions · 18 commands
CSS Animation Composition and Easing Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Replace the underlying value | .pulse { animation-composition: replace; } | View examples |
| Add an animation effect | .badge { animation-composition: add; } | View examples |
| Accumulate an effect | .counter { animation-composition: accumulate; } | View examples |
| Change composition at a keyframe | @keyframes move {
from { translate:
0; animation-composition: add; } to { translate: 2rem; };
} | View examples |
| Coordinate two animations | animation-name:
drift, pulse; animation-duration: 2s, 800ms; animation-composition: add, replace; | View examples |
| Add independent transforms | .icon {
animation:
spin 2s linear infinite, bob 1s ease-in-out infinite alternate;
animation-composition: add, add;
} | View examples |
| Separate transform components | .card { translate: 0 0; rotate: 0deg; scale: 1; } | View examples |
| Use standard ease | .panel { animation-timing-function: ease; } | View examples |
| Define a Bézier curve | .panel {
animation-timing-function: cubic-bezier(.2, .8, .2, 1);
} | View examples |
| Create discrete frames | .sprite {
animation-timing-function: steps(8, jump-end);
} | View examples |
| Jump immediately | .switch { animation-timing-function: step-start; } | View examples |
| Define sampled linear easing | .spring {
animation-timing-function:
linear(0, .7 40%, 1.05 70%, 1);
} | View examples |
| Ease one segment | @keyframes lift {
0% { translate:
0; animation-timing-function: ease-out; } 60% { translate: 0 -1rem; };
} | View examples |
| Avoid relying on final easing | @keyframes fade {
0% { opacity:
0; animation-timing-function: ease-out; } 100% { opacity: 1; };
} | View examples |
| Opt into discrete transitions | .popover {
transition: opacity .2s, display .2s allow-discrete;
} | View examples |
| Define an entry start style | @starting-style {
.popover:popover-open { opacity: 0; };
} | View examples |
| Respect reduced motion | @media (prefers-reduced-motion: reduce) {
.animated { animation: none; transition: none; };
} | View examples |
| Hint only imminent animation | .card.is-about-to-move { will-change: transform; } | View examples |
Motion and Transitions · 14 commands
CSS Motion Paths Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Follow an SVG-style path | .traveler {
offset-path: path('M 20 80 C 80 0 180 160 240 80');
} | View examples |
| Follow a basic shape | .satellite { offset-path: circle(40% at 50% 50%); } | View examples |
| Follow a contained ray | .marker {
offset-path:
ray(45deg closest-side contain at 50% 50%);
} | View examples |
| Choose the path reference box | .orb { offset-path: circle(42%) content-box; } | View examples |
| Move halfway along | .traveler { offset-distance: 50%; } | View examples |
| Animate path progress | @keyframes travel { to { offset-distance: 100%; } } | View examples |
| Face the path direction | .vehicle { offset-rotate: auto; } | View examples |
| Correct asset orientation | .vehicle { offset-rotate: auto 90deg; } | View examples |
| Keep a fixed orientation | .label { offset-rotate: 0deg; } | View examples |
| Choose the aligned element point | .pin { offset-anchor: 50% 100%; } | View examples |
| Set a ray starting point | .pin { offset-position: 25% 75%; } | View examples |
| Use the offset shorthand | .dot {
offset: path('M 0 0 L 200 0') 50% auto / center;
} | View examples |
| Gate path positioning | @supports (offset-path: circle(40%)) {
.status { offset-path: circle(40%); };
} | View examples |
| Remove optional travel | @media (prefers-reduced-motion: reduce) {
.traveler { animation: none; offset-distance: 100%; };
} | View examples |
Motion and Transitions · 24 commands
CSS Scroll-Driven Animations and View Timelines Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Attach after the shorthand | .subject {
animation: reveal linear both;
animation-timeline: view();
} | View examples |
| Fill a progress timeline | .subject { animation-duration: auto; } | View examples |
| Track document scrolling | .progress { animation-timeline: scroll(root block); } | View examples |
| Track the nearest scroller | .indicator {
animation-timeline: scroll(nearest block);
} | View examples |
| Track the element itself | .scroller { animation-timeline: scroll(self inline); } | View examples |
| Track visibility through a scrollport | .card { animation-timeline: view(); } | View examples |
| Set view axis and insets | .card { animation-timeline: view(block 15% 25%); } | View examples |
| Name a scroll timeline | .reader { scroll-timeline-name: --reading; } | View examples |
| Choose a named scroll axis | .reader { scroll-timeline-axis: block; } | View examples |
| Declare a named scroll timeline | .reader { scroll-timeline: --reading block; } | View examples |
| Consume a named timeline | .reader__progress { animation-timeline: --reading; } | View examples |
| Localize a repeated timeline name | .reader-widget { timeline-scope: --reading; } | View examples |
| Name a view timeline | .chapter { view-timeline-name: --chapter; } | View examples |
| Choose a named view axis | .chapter { view-timeline-axis: block; } | View examples |
| Adjust the visibility range | .chapter { view-timeline-inset: 10% 20%; } | View examples |
| Declare a named view timeline | .chapter { view-timeline: --chapter block 10% 20%; } | View examples |
| Animate across entry | .card { animation-range: entry; } | View examples |
| Choose range endpoints | .card { animation-range: entry 10% cover 35%; } | View examples |
| Set range endpoints separately | .card {
animation-range-start: entry 10%;
animation-range-end: cover 35%;
} | View examples |
| Guard the enhancement | @supports (animation-timeline: view()) {
.reveal { animation-timeline: view(); };
} | View examples |
| Honor reduced motion | @media (prefers-reduced-motion: reduce) {
.reveal { animation: none; };
} | View examples |
| Animate transform and opacity | @keyframes reveal {
from { opacity: 0; transform: translateY(2rem); };
} | View examples |
| Snap scrolling independently | .rail { scroll-snap-type: inline proximity; } | View examples |
| Start a View Transition | document.startViewTransition(update); | View examples |
Motion and Transitions · 11 commands
CSS Transforms and Coordinate Systems Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Translate | .item { transform: translate(1rem, -0.5rem); } | View examples |
| Rotate | .item { transform: rotate(8deg); } | View examples |
| Scale | .item { transform: scale(1.05); } | View examples |
| Use individual properties | .item { translate: 1rem 0; rotate: 5deg; scale: 1.1; } | View examples |
| Compose functions | .item { transform: translateX(2rem) rotate(10deg); } | View examples |
| Move the origin | .door { transform-origin: left center; } | View examples |
| Choose reference box | svg path {
transform-box: fill-box;
transform-origin: center;
} | View examples |
| Set scene perspective | .scene { perspective: 800px; } | View examples |
| Preserve child depth | .card { transform-style: preserve-3d; } | View examples |
| Hide the reverse face | .face { backface-visibility: hidden; } | View examples |
| Remove optional motion | @media (prefers-reduced-motion: reduce) {
.item { transform: none; };
} | View examples |
Motion and Transitions · 18 commands
CSS Transitions and Animations Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Choose transitioned properties | .button {
transition-property: background-color, transform;
} | View examples |
| Set transition duration | .button { transition-duration: 160ms; } | View examples |
| Declare a transition | .button { transition: transform 160ms ease-out; } | View examples |
| Transition several properties | .card {
transition:
transform 180ms ease-out, box-shadow 180ms ease-out;
} | View examples |
| Delay a transition | .item { transition-delay: 80ms; } | View examples |
| Use custom easing | .panel {
transition-timing-function:
cubic-bezier(.2, .8, .2, 1);
} | View examples |
| Use stepped timing | .sprite { transition-timing-function: steps(6, end); } | View examples |
| Define keyframes | @keyframes fade-in {
from { opacity: 0; } to { opacity: 1; };
} | View examples |
| Run a keyframe animation | .notice { animation: fade-in 240ms ease-out; } | View examples |
| Add intermediate keyframes | @keyframes pulse {
0%, 100% { opacity: 1; } 50% { opacity: .55; };
} | View examples |
| Repeat an animation | .spinner { animation-iteration-count: infinite; } | View examples |
| Alternate direction | .indicator { animation-direction: alternate; } | View examples |
| Retain the final keyframe | .enter { animation-fill-mode: forwards; } | View examples |
| Pause an animation | .carousel:hover { animation-play-state: paused; } | View examples |
| Move with transform | .card:hover { transform: translateY(-.25rem); } | View examples |
| Fade with opacity | .popover[data-open="true"] { opacity: 1; } | View examples |
| Honor reduced motion | @media (prefers-reduced-motion: reduce) {
.animated { animation:
none; transition-duration: .01ms; };
} | View examples |
| Preserve a clear focus state | .button:focus-visible {
outline: .2rem solid currentColor;
outline-offset: .2rem;
} | View examples |
Motion and Transitions · 16 commands
CSS View Transitions Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Start a transition | document.startViewTransition(() => updateDOM()); | View examples |
| Provide an API fallback | document.startViewTransition ? document.startViewTransition(update) :
update(); | View examples |
| Name a shared element | .hero { view-transition-name: product-hero; } | View examples |
| Exclude an element | .live-clock { view-transition-name: none; } | View examples |
| Style group geometry | ::view-transition-group(product-hero) {
animation-duration: 360ms;
} | View examples |
| Animate the old capture | ::view-transition-old(product-hero) {
animation: fade-out 180ms ease-in both;
} | View examples |
| Animate the new capture | ::view-transition-new(product-hero) {
animation: fade-in 240ms ease-out both;
} | View examples |
| Customize the root cross-fade | ::view-transition-old(root) {
animation: fade-out 160ms linear both;
} | View examples |
| Control image-pair blending | ::view-transition-image-pair(card) {
isolation: isolate;
} | View examples |
| Opt in navigation | @view-transition { navigation: auto; } | View examples |
| Declare navigation types | @view-transition {
navigation: auto;
types: forwards backwards;
} | View examples |
| Match an active type | :active-view-transition-type(forwards) {
--slide-direction: 1;
} | View examples |
| Class several captures | .tile { view-transition-class: tile; } | View examples |
| Style a capture class | ::view-transition-group(*.tile) {
animation-duration: 300ms;
} | View examples |
| Respect reduced motion | @media (prefers-reduced-motion: reduce) {
::view-transition-group(*) { animation-duration: 1ms; };
} | View examples |
| Limit expensive capture area | .card { contain: paint; view-transition-name: card; } | View examples |