transitions.marcow.poke.site

Transitions Showcase

A complete interactive reference for all 21 transition skills from the Transitions.dev spec by Jakub Antalík. Native CSS and View Transitions API only.

Tokens

Official timing tokens

Token	Value	Used for
--p1-dur	150ms	Micro-interactions
--p2-dur	200ms	Icon swaps, toggles, dropdowns
--p3-dur	250ms	State changes, toasts
--p4-dur	300ms	Layout resize, panels
--p4-ease	cubic-bezier(0.22, 1, 0.36, 1)	Exit ease

Card Resize

Fluid layout resizing with --p4-dur and --p4-ease.

.t-resize

Menu Dropdown

Opacity + translateY(-8px) scale(0.96) entry with --p2-dur and --p4-ease.

.t-dropdown

Modal

Centered panel with scale and fade overlay.

.t-modal-overlay

Icon Swap

Scale(0.5) + blur(2px) for hidden icon state.

.t-icon-swap

Success Check

Springy confirmation animation.

.t-success-check

Button Press

Tactile scale down on press.

.t-button-press

Toggle Switch

Smooth thumb travel and track fill.

.t-toggle-thumb

Toast

Slide up from bottom with fade.

Saved successfully

.t-toast

Tooltip

Scale-95 entry from bottom center.

.t-tooltip

Accordion

Grid-template-rows reveal with rotating icon.

Content reveals smoothly using CSS grid animation.

.t-accordion-content

Tab Panel

Animated underline and crossfade panel.

Content for tab A.

.t-tab-panel

Slide Over

Panel slides in from the right edge.

Drawer

.t-slide-over

Sheet

Bottom sheet rising from the viewport edge.

Bottom sheet

Rises with --p4-dur ease.

.t-sheet

Popover

Scale-95 entry from top center.

.t-popover

Skeleton

Shimmer loading placeholder.

.t-skeleton

Image Reveal

Clip-path wipe reveal from top to bottom.

Revealed content

.t-image-reveal

List Reorder

Items smoothly move to new positions.

Item A

Item B

Item C

.t-list-reorder

Page Transition

View Transitions API morphs elements between states.

Card A

Card B

Card C

document.startViewTransition

Hover Lift

Card lifts and brightens border on hover.

Hover this card

It lifts 4px and the border lightens.

.t-hover-lift

Stagger Children

Sequential fade-and-rise entrance.

One

Two

Three

.t-stagger

Error Shake

Form error shake animation over 400ms.

.t-error-shake