Transition timing function

import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourTheme, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx";

export const title = "transition-timing-function"; export const description = "Utilities for controlling the easing of CSS transitions.";

)", "transition-timing-function: var(\);"], ["ease-[\]", "transition-timing-function: \;"], ]} />

Examples

Basic example

Use utilities like ease-in and ease-out to control the easing curve of an element's transition:

{

ease-in

Button A

ease-out

Button B

ease-in-out

Button C

}

<!-- [!code classes:ease-in,ease-out,ease-in-out] -->
<button class="duration-300 ease-in ...">Button A</button>
<button class="duration-300 ease-out ...">Button B</button>
<button class="duration-300 ease-in-out ...">Button C</button>

Using a custom value

Responsive design

Customizing your theme