transition, transition-all/colors/opacity/transform/shadow — what animates. This family contains 7 generated classes in Nakshora 3.1.

Classes#

ClassGenerated CSS
transition-nonetransition-property: none;
transition-alltransition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;
transitiontransition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;
transition-colorstransition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;
transition-opacitytransition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;
transition-shadowtransition-property: box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;
transition-transformtransition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;

Example#

example
html
<button class="transition-colors hover:bg-blue-600">Smooth color</button>

Responsive & variants#

Every class here accepts screen prefixes (xxs: … 5xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.

Best practices#

  • Prefer specific transition-* over transition-all (performance)
  • transition + duration defaults = 150ms

Common mistakes#

  • transition-all animating layout properties (width) — jank source

utilities/animations/keyframes|Animations · utilities/transitions/timing-function|Easing