ease-linear/in/out/in-out plus spring-like custom curves. This family contains 5 generated classes in Nakshora 3.1.
Classes#
| Class | Generated CSS |
|---|---|
ease-linear | transition-timing-function: linear; |
ease-in | transition-timing-function: cubic-bezier(0.4, 0, 1, 1); |
ease-out | transition-timing-function: cubic-bezier(0, 0, 0.2, 1); |
ease-in-out | transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); |
ease-back | transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); |
Example#
example
<div class="transition ease-out duration-200">Natural motion</div>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#
- ease-out for entrances, ease-in for exits
Related#
utilities/animations/keyframes|Animations · utilities/transitions/timing-function|Easing