# easings

> Named `transition-timing-function` curves shared by every animation factory, component, and mixin that needs one, so every transition across the catalog settles into the same small set of curves.

```ts
import { easings } from "@sdxc/ui/animations";
```

Named `transition-timing-function` curves shared by every animation
factory, component, and mixin that needs one, so every transition across
the catalog settles into the same small set of curves.

## Signature

```ts
const easings = {
	/** The general-purpose curve for enter/exit transitions: gentle acceleration, gentle deceleration. */
	standard: "cubic-bezier(0.4, 0, 0.2, 1)",
	/** Starts fast and settles slowly; reads as an element arriving into place. Suits entrances. */
	decelerate: "cubic-bezier(0, 0, 0.2, 1)",
	/** Starts slowly and leaves quickly; reads as an element departing the screen. Suits exits. */
	accelerate: "cubic-bezier(0.4, 0, 1, 1)",
	/** Constant rate from start to end; matches the platform's own `linear` keyword. */
	linear: "linear",
} as const
```

## Examples

```tsx
fade({ easing: easings.decelerate });
```

```tsx
transitionTimingFunction: easings.standard,
```