Motion primitives
44Fade in / Fade out
fade-in-fade-outSlide in
slide-inScale in
scale-inReveal
reveal- Item 1
- Item 2
- Item 3
- Item 4
Stagger
staggerKeyframes
keyframesDuration
durationTranslate
translate3D tilt / Flip
3d-tilt-flipOrigin-aware animation
origin-aware-animationCrossfade
crossfadeMorph
morphAccordion / Collapse
Expandable content remains available to keyboard and assistive technology users.
Accordion / Collapse
accordion-collapseDirection-aware transition
direction-aware-transitionScroll
Scroll reveal
Continue
Scroll reveal
scroll-revealScroll
Scroll-driven animation
Continue
Scroll-driven animation
scroll-driven-animationScroll
Parallax
Continue
Parallax
parallaxPage transition
page-transitionHover effect
hover-effectPress / Tap feedback
press-tap-feedbackHold to confirm
hold-to-confirm- Drag item A
- Drag item B
- Drag item C
Drag to reorder
drag-to-reorderSwipe to dismiss
swipe-to-dismissShake / Wiggle
shake-wiggleRipple
rippleEasing
easingSpring
spring●
Loop
loopMarqueeMotionInterfaceMarqueeMotionInterface
Marquee
marqueeOrbit
orbitIdle animation
idle-animationBlur
blurBefore
After
Before / after slider
before-after-sliderLine drawing
line-drawingPlanBuild
Text morph
text-morphSkeleton / Shimmer
skeleton-shimmer128
Number ticker
number-tickerMotion, made legible.
Typewriter
typewriterFrame rate (FPS)
frame-rateCompositing
compositingPurposeful animation
purposeful-animationAnticipation
anticipationPerceived performance
perceived-performanceReduced motion
reduced-motion