# Recommended Custom CSS Easing Curves for UI Animations: 3 Tokens for Deliberate Motion

> Discover recommended custom CSS easing curves for UI animations. Learn 3 specific cubic-bezier tokens for entrances, symmetric motion, and drawer animations to enhance your user interface.

- Repository: [Emil Kowalski/skills](https://github.com/emilkowalski/skills)
- Tags: best-practices
- Published: 2026-08-06

---

**Use `cubic-bezier(0.23, 1, 0.32, 1)` for entrances, `cubic-bezier(0.77, 0, 0.175, 1)` for symmetric movement, and `cubic-bezier(0.32, 0.72, 0, 1)` for drawer animations.**

The `skills` repository by Emil Kowalski treats **CSS easing curves** as foundational to motion design. Rather than relying on built‑in keywords like `ease` or `ease-out`, the codebase defines **strong custom cubic-bezier tokens** as CSS custom properties. This article explains the three recommended curves, why they matter, and how to implement them based on the source code analysis of `emilkowalski/skills`.

## Why Built-In CSS Easings Fall Short

Standard CSS easings are considered too weak for deliberate UI motion. In [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md), the repository explicitly rejects `ease`, `ease-in`, `ease-out`, and `ease-in-out` as insufficient for polished interfaces.

The [`skills/improve-animations/AUDIT.md`](https://github.com/emilkowalski/skills/blob/main/skills/improve-animations/AUDIT.md) file flags **`ease-in` on UI as a critical finding** — it delays the visible start of motion, breaking the perceived responsiveness that users expect.

## The Three Core Easing Tokens

All recommended **custom CSS easing curves** live as CSS custom properties in a shared token system. This centralizes values, enables theming, and guarantees consistency.

| Token | Cubic-Bezier Value | Primary Use Case |
|-------|-------------------|------------------|
| `--ease-out` | `cubic-bezier(0.23, 1, 0.32, 1)` | UI entrances, modal and panel slides |
| `--ease-in-out` | `cubic-bezier(0.77, 0, 0.175, 1)` | On-screen movement with pronounced acceleration-deceleration |
| `--ease-drawer` | `cubic-bezier(0.32, 0.72, 0, 1)` | iOS-style drawer animations (side menus, bottom sheets) |

These definitions appear in [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md) and are reinforced throughout [`skills/review-animations/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/SKILL.md) and [`skills/animate/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/animate/SKILL.md).

## Defining Easing Tokens in Your Codebase

Create a global tokens file, typically at [`src/styles/tokens.css`](https://github.com/emilkowalski/skills/blob/main/src/styles/tokens.css):

```css
/* tokens.css */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

```

This token-based approach is documented in [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md) and referenced in [`skills/animate/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/animate/SKILL.md) as the animation vocabulary foundation.

## Applying Easing Tokens in CSS

Reference the custom property directly in your animation or transition declarations:

```css
.modal {
  animation: slideIn 300ms var(--ease-out) forwards;
}

@keyframes slideIn {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

```

The [`skills/prototype/PICKER.md`](https://github.com/emilkowalski/skills/blob/main/skills/prototype/PICKER.md) file demonstrates this `--ease-out` usage in component prototypes.

## Using Easing Tokens in JavaScript

Access computed custom properties for the Web Animations API or other JS-driven motion:

```js
const easeOut = getComputedStyle(document.documentElement)
  .getPropertyValue('--ease-out');

element.animate(
  [
    { transform: 'translateY(20px)', opacity: 0 },
    { transform: 'translateY(0)', opacity: 1 }
  ],
  {
    duration: 300,
    easing: easeOut.trim()
  }
);

```

This pattern aligns with the token-first approach described in [`skills/animate/RECIPES.md`](https://github.com/emilkowalski/skills/blob/main/skills/animate/RECIPES.md).

## Performance and Accessibility Constraints

The repository mandates two critical constraints for **CSS easing curves** in production:

- **Animate only `transform` and `opacity`** — These properties avoid layout thrashing and compose on the GPU, as documented in [`skills/prototype/PICKER.md`](https://github.com/emilkowalski/skills/blob/main/skills/prototype/PICKER.md) and [`skills/animate/RECIPES.md`](https://github.com/emilkowalski/skills/blob/main/skills/animate/RECIPES.md)

- **Respect `prefers-reduced-motion`** — When users request reduced motion, soften or disable animations while maintaining the token structure:

```css
@media (prefers-reduced-motion: reduce) {
  .modal {
    animation: none;
    transition: none;
  }
}

```

This handling appears in [`skills/prototype/PICKER.md`](https://github.com/emilkowalski/skills/blob/main/skills/prototype/PICKER.md) as part of the accessibility strategy.

## Advanced: Reversible Transitions and Mirrored Curves

For interactive elements that can reverse mid-animation, [`skills/apple-design/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/apple-design/SKILL.md) explores **mirrored easing curves**. A drawer that opens with `--ease-drawer` may need a complementary curve for dismissal to maintain physical plausibility.

The [`skills/emil-design-eng/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/emil-design-eng/SKILL.md) file links to external cubic-bezier resources and discusses how custom easing contributes to perceived quality in design engineering workflows.

## Summary

- **Define three tokens**: `--ease-out`, `--ease-in-out`, and `--ease-drawer` with the specific cubic-bezier values from [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md)

- **Never use `ease-in` on UI elements** — it creates perceived lag and violates the repository's audit rules from [`skills/improve-animations/AUDIT.md`](https://github.com/emilkowalski/skills/blob/main/skills/improve-animations/AUDIT.md)

- **Restrict animation to `transform` and `opacity`** for 60fps performance

- **Support `prefers-reduced-motion`** by disabling or shortening animations rather than changing easing curves arbitrarily

- **Reference tokens in CSS and JS** via `getComputedStyle()` to maintain single-source consistency

## Frequently Asked Questions

### What makes these cubic-bezier curves better than standard CSS easings?

**Built-in easings like `ease` and `ease-out` use conservative curves** that feel generic and slow. The custom values in [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md) are engineered for stronger acceleration or deceleration — the `--ease-out` curve hits `1` on the Y-axis at only `0.32` on the X-axis, creating a snappier conclusion that users perceive as responsive and intentional.

### Can I use these easing curves with CSS transitions?

**Yes — the token system works for both `transition` and `animation` properties.** Reference the custom property in any `transition-timing-function` or `animation-timing-function` declaration. The [`skills/animate/RECIPES.md`](https://github.com/emilkowalski/skills/blob/main/skills/animate/RECIPES.md) file contains concrete examples for both use cases.

### How do I choose between `--ease-out` and `--ease-in-out`?

**Use `--ease-out` for elements entering the viewport** (modals, toasts, dropdowns) where you want fast conclusion and settled perception. **Use `--ease-in-out` for elements moving across screen space** (carousels, draggable panels) where both acceleration and deceleration should feel weighted and deliberate. The decision rules are formalized in [`skills/review-animations/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/SKILL.md).

### Why does the repository discourage animating properties beyond `transform` and `opacity`?

**Layout-triggering properties like `width`, `top`, or `margin` force recalculation of geometry** on every frame, causing jank on lower-end devices. The [`skills/prototype/PICKER.md`](https://github.com/emilkowalski/skills/blob/main/skills/prototype/PICKER.md) and related files establish `transform` and `opacity` as the only performant, accessible targets for motion, with **CSS easing curves** applied via the token system to complete the effect.