Transition

Choose the property set used by a transition and its built-in timing defaults.

Choose which CSS properties change smoothly when a state or value changes. Pair a transition utility with state variants such as hover or focus-visible on a real control.

Quick reference

Example class	Expected declarations
`transition-colors`	`transition-property: color,background-color,border-color,outline-color,text-decoration-color,fill,stroke; transition-duration: 150ms; transition-timing-function: ease;`

Example setup

Every preview uses spec: 1, reset: "none", strict mode, an explicit spacingUnit of "0.25rem", no breakpoints, and defaultTransitionTimingFunction: "ease". Transition utilities other than transition-none set 150ms and use that configured timing function. Buttons respond to both pointer hover and keyboard focus. The authored demo CSS removes transition time when prefers-reduced-motion is reduce; the utility examples use only short, user-triggered changes.

Examples in use

Respond to hover and keyboard focus

transition-colors uses the built-in 150ms and ease defaults while the button background changes on hover or focus-visible.

Respond to hover and keyboard focus

HTML

<div class="wind-demo-motion"><button type="button" class="wind-demo-trigger transition-colors hover:bg-[#dbeafe] focus-visible:bg-[#dbeafe]">Save changes</button></div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo-motion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  max-width: 38rem;
  color: #24364b;
  font: 15px / 1.5 system-ui, sans-serif;
}

.wind-demo-motion button {
  min-width: 9rem;
  border: 1px solid #526477;
  border-radius: .35rem;
  background: #eef3f8;
  color: inherit;
  padding: .65rem .9rem;
  font: inherit;
  text-align: left;
}

.wind-demo-motion button:focus-visible {
  outline: 3px solid #1670b8;
  outline-offset: 3px;
}

.wind-demo-motion .wind-demo-trigger {
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .wind-demo-motion .wind-demo-trigger {
    transition-duration: 0s !important;
  }
}
.transition-colors {
  transition-property: color,background-color,border-color,outline-color,text-decoration-color,fill,stroke;
  transition-duration: 150ms;
  transition-timing-function: ease;
}
@media (hover: hover) {
  .hover\:bg-\[\#dbeafe\]:hover {
    background-color: #dbeafe;
  }
}
.focus-visible\:bg-\[\#dbeafe\]:focus-visible {
  background-color: #dbeafe;
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-motion": true,
      "wind-demo-trigger": true
    },
    "safelist": {
      "docs-preview": [
        "transition-colors",
        "hover:bg-[#dbeafe]",
        "focus-visible:bg-[#dbeafe]"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo-motion { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; max-width: 38rem; color: #24364b; font: 15px/1.5 system-ui, sans-serif; }
.wind-demo-motion button { min-width: 9rem; border: 1px solid #526477; border-radius: 0.35rem; background: #eef3f8; color: inherit; padding: 0.65rem 0.9rem; font: inherit; text-align: left; }
.wind-demo-motion button:focus-visible { outline: 3px solid #1670b8; outline-offset: 3px; }
.wind-demo-motion .wind-demo-trigger { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .wind-demo-motion .wind-demo-trigger { transition-duration: 0s !important; } }

Transition one chosen property

transition-[border-color] narrows the animated property set; the same focus and hover state changes the border color.

Transition one chosen property

HTML

<div class="wind-demo-motion"><button type="button" class="wind-demo-trigger transition-[border-color] hover:border-[#1d4ed8] focus-visible:border-[#1d4ed8]">Show the outline change</button></div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo-motion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  max-width: 38rem;
  color: #24364b;
  font: 15px / 1.5 system-ui, sans-serif;
}

.wind-demo-motion button {
  min-width: 9rem;
  border: 1px solid #526477;
  border-radius: .35rem;
  background: #eef3f8;
  color: inherit;
  padding: .65rem .9rem;
  font: inherit;
  text-align: left;
}

.wind-demo-motion button:focus-visible {
  outline: 3px solid #1670b8;
  outline-offset: 3px;
}

.wind-demo-motion .wind-demo-trigger {
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .wind-demo-motion .wind-demo-trigger {
    transition-duration: 0s !important;
  }
}
.transition-\[border-color\] {
  transition-property: border-color;
  transition-duration: 150ms;
  transition-timing-function: ease;
}
@media (hover: hover) {
  .hover\:border-\[\#1d4ed8\]:hover {
    border-top-color: #1d4ed8;
    border-right-color: #1d4ed8;
    border-bottom-color: #1d4ed8;
    border-left-color: #1d4ed8;
  }
}
.focus-visible\:border-\[\#1d4ed8\]:focus-visible {
  border-top-color: #1d4ed8;
  border-right-color: #1d4ed8;
  border-bottom-color: #1d4ed8;
  border-left-color: #1d4ed8;
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-motion": true,
      "wind-demo-trigger": true
    },
    "safelist": {
      "docs-preview": [
        "transition-[border-color]",
        "hover:border-[#1d4ed8]",
        "focus-visible:border-[#1d4ed8]"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo-motion { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; max-width: 38rem; color: #24364b; font: 15px/1.5 system-ui, sans-serif; }
.wind-demo-motion button { min-width: 9rem; border: 1px solid #526477; border-radius: 0.35rem; background: #eef3f8; color: inherit; padding: 0.65rem 0.9rem; font: inherit; text-align: left; }
.wind-demo-motion button:focus-visible { outline: 3px solid #1670b8; outline-offset: 3px; }
.wind-demo-motion .wind-demo-trigger { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .wind-demo-motion .wind-demo-trigger { transition-duration: 0s !important; } }

Skip interpolation

transition-none makes the same state change immediate. It emits no duration or timing-function declarations.

Skip interpolation

HTML

<div class="wind-demo-motion"><button type="button" class="wind-demo-trigger transition-none hover:bg-[#dbeafe] focus-visible:bg-[#dbeafe]">Change without interpolation</button></div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo-motion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  max-width: 38rem;
  color: #24364b;
  font: 15px / 1.5 system-ui, sans-serif;
}

.wind-demo-motion button {
  min-width: 9rem;
  border: 1px solid #526477;
  border-radius: .35rem;
  background: #eef3f8;
  color: inherit;
  padding: .65rem .9rem;
  font: inherit;
  text-align: left;
}

.wind-demo-motion button:focus-visible {
  outline: 3px solid #1670b8;
  outline-offset: 3px;
}

.wind-demo-motion .wind-demo-trigger {
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .wind-demo-motion .wind-demo-trigger {
    transition-duration: 0s !important;
  }
}
.transition-none {
  transition-property: none;
}
@media (hover: hover) {
  .hover\:bg-\[\#dbeafe\]:hover {
    background-color: #dbeafe;
  }
}
.focus-visible\:bg-\[\#dbeafe\]:focus-visible {
  background-color: #dbeafe;
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-motion": true,
      "wind-demo-trigger": true
    },
    "safelist": {
      "docs-preview": [
        "transition-none",
        "hover:bg-[#dbeafe]",
        "focus-visible:bg-[#dbeafe]"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo-motion { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; max-width: 38rem; color: #24364b; font: 15px/1.5 system-ui, sans-serif; }
.wind-demo-motion button { min-width: 9rem; border: 1px solid #526477; border-radius: 0.35rem; background: #eef3f8; color: inherit; padding: 0.65rem 0.9rem; font: inherit; text-align: left; }
.wind-demo-motion button:focus-visible { outline: 3px solid #1670b8; outline-offset: 3px; }
.wind-demo-motion .wind-demo-trigger { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .wind-demo-motion .wind-demo-trigger { transition-duration: 0s !important; } }

Custom and named values

transition, transition-all, transition-colors, transition-opacity, transition-shadow, transition-transform, and transition-none are the supported keywords. A one-off property list can use an arbitrary form such as transition-[border-color]. No named transition-property tokens are built in. transition-none emits only transition-property: none, so it does not set the default duration or easing.

Related guides: Utility grammar · Variants

Catalog details

transition

Field	Value
Catalog identifier	`v1.transition`
Class pattern	`transition` or `transition-<suffix>`
Grammar	`{"acceptedKinds":["keyword","arbitrary"],"arbitraryProperty":"transition-property","allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`7`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`transition` (`35`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`transition-property`, `transition-duration`, `transition-timing-function`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`null`	`"all"`
`keyword`	`"all"`	`"all"`
`keyword`	`"none"`	`"none"`
`keyword`	`"colors"`	`"color,background-color,border-color,outline-color,text-decoration-color,fill,stroke"`
`keyword`	`"opacity"`	`"opacity"`
`keyword`	`"shadow"`	`"box-shadow"`
`keyword`	`"transform"`	`"transform,translate,rotate,scale"`

Declaration templates

Property	Value kind	Fixed value
`transition-property`	`resolved`	`null`
`transition-duration`	`transitionDuration`	`null`
`transition-timing-function`	`transitionTimingFunction`	`null`

Catalog examples

Example class	Expected declarations
`transition-colors`	`transition-property: color,background-color,border-color,outline-color,text-decoration-color,fill,stroke`; `transition-duration: 150ms`; `transition-timing-function: ease`

Transition

Quick reference

Examples in use

Respond to hover and keyboard focus

Transition one chosen property

Skip interpolation

Custom and named values

transition

Accepted values

Declaration templates

Catalog examples

Revision History