# Recommended Easing Values for Professional UI Animations: A Practical Guide

> Discover recommended cubic-bezier easing values for professional UI animations. Enhance responsiveness and create crisp motion with these expert-recommended curves.

- Repository: [Emil Kowalski/skills](https://github.com/emilkowalski/skills)
- Tags: how-to-guide
- Published: 2026-08-07

---

**Strong custom cubic-bezier curves (0.23, 1, 0.32, 1), (0.77, 0, 0.175, 1), and (0.32, 0.72, 0, 1) should replace default CSS easings like `ease`, `ease-in`, and `ease-out` to achieve crisp, responsive motion in professional interfaces.**

The `emilkowalski/skills` repository treats easing as a core design-engineering decision, not an afterthought. According to the standards codified in [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md), default CSS easings are deliberately too soft for deliberate, professional motion. This article breaks down the exact **recommended easing values for professional UI animations** and how to implement them.

## Why Default CSS Easings Fall Short

Default browser easings create sluggish, uninspired motion. The repository's [`skills/animate/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/animate/SKILL.md) explicitly warns that built-in CSS easings are "too weak" for modern product interfaces.

**Avoid these defaults:**

| Easing | Problem |
|--------|---------|
| `ease-in` | **Never use on UI** — delays the visible response, making interactions feel broken |
| `ease` | Too soft for most transitions; acceptable only for subtle hover feedback |
| `ease-out` | Browser default lacks the aggressive start needed for responsive feel |
| `ease-in-out` | Default creates awkward pacing for longer movements |

The [`skills/improve-animations/AUDIT.md`](https://github.com/emilkowalski/skills/blob/main/skills/improve-animations/AUDIT.md) flags any occurrence of `ease-in` as a mandatory replacement finding.

## Core Cubic-Bezier Tokens from the Standards

The [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md) file defines three production-ready CSS custom properties. These are the **recommended easing values for professional UI animations**:

```css
:root {
  --ease-out:     cubic-bezier(0.23, 1, 0.32, 1);   /* crisp entrance/exit */
  --ease-in-out:  cubic-bezier(0.77, 0, 0.175, 1);  /* on-screen movement */
  --ease-drawer:  cubic-bezier(0.32, 0.72, 0, 1);   /* iOS-style panels */
}

```

### What Makes These Values Work

- **`--ease-out` (0.23, 1, 0.32, 1)**: The first control point `(0.23, 1)` forces rapid initial velocity. This creates the "fast-start" feel that makes interfaces feel responsive and snappy.

- **`--ease-in-out` (0.77, 0, 0.175, 1)**: The asymmetric curve `(0.77, 0)` generates strong acceleration and deceleration. This pattern feels natural for elements traveling significant distance across the screen.

- **`--ease-drawer` (0.32, 0.72, 0, 1)**: Matches iOS system motion. The `(0.32, 0.72)` initial pull creates that familiar, buttery resistance before the smooth settle.

## Situational Easing Selection

The repository provides a decision order for applying these tokens:

| Situation | Easing Choice | Rationale |
|-----------|---------------|-----------|
| **Enter / exit animations** | `var(--ease-out)` | Fast start feels responsive; soft finish avoids jarring landings |
| **On-screen movement / morphing** | `var(--ease-in-out)` | Acceleration and deceleration for longer travels |
| **Hover / color changes** | `ease` | Subtle, non-intrusive feedback |
| **Constant motion (marquees, progress bars)** | `linear` | Uniform speed matches user expectation |
| **Side panels / modals** | `var(--ease-drawer)` | Familiar iOS-style motion language |

## Practical Implementation Examples

### CSS-Only Transitions

Define tokens globally, then reference via `var()`:

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

/* Button press feedback — 160ms keeps it under the 300ms ceiling */
button {
  transition: transform 160ms var(--ease-out);
}
button:active {
  transform: scale(0.97);
}

/* Card entrance animation */
.card-enter {
  animation: slide-up 250ms var(--ease-out) forwards;
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

```

### Web Animations API (JavaScript)

```javascript
// Drawer slide-in using the iOS-style curve
const drawer = document.querySelector('.drawer');

drawer.animate(
  [
    { transform: 'translateX(-100%)' },
    { transform: 'translateX(0)' }
  ],
  {
    duration: 250,
    easing: 'cubic-bezier(0.32, 0.72, 0, 1)'  // --ease-drawer
  }
);

// Modal scale-in with strong ease-out
dialog.animate(
  [
    { opacity: 0, transform: 'scale(0.96)' },
    { opacity: 1, transform: 'scale(1)' }
  ],
  {
    duration: 200,
    easing: 'cubic-bezier(0.23, 1, 0.32, 1)'  // --ease-out
  }
);

```

### Reduced Motion Support

The standards require respecting `prefers-reduced-motion`. Keep timing consistent but eliminate transform-heavy motion:

```css
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

```

## Sourcing Additional Curves

For specialized motion needs, [`skills/emil-design-eng/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/emil-design-eng/SKILL.md) recommends curated libraries over hand-rolling:

- **easing.dev** — Mathematical exploration of easing functions with visual previews
- **easings.co** — Production-ready CSS cubic-bezier values with copy-paste convenience

These collections maintain the same rigor as the repository's internal standards.

## Implementation Checklist

1. **Declare tokens once** in a global `:root` selector
2. **Reference via `var()`** throughout component styles and animation APIs
3. **Audit and replace** any `ease-in` usage with appropriate custom curves
4. **Cap durations at 300ms** per the repository's ceiling guideline
5. **Honor reduced-motion** with timing-only fallbacks

## Summary

- **Primary recommended easing values for professional UI animations**: `cubic-bezier(0.23, 1, 0.32, 1)`, `cubic-bezier(0.77, 0, 0.175, 1)`, and `cubic-bezier(0.32, 0.72, 0, 1)`
- **Never use `ease-in`** on UI elements — it delays visible response
- **Default CSS easings are too soft** — replace with strong custom curves
- **Keep all animations under 300ms** for crisp, professional feel
- **Source additional curves** from easing.dev or easings.co rather than inventing values

## Frequently Asked Questions

### What is the best easing for button click feedback?

Use `cubic-bezier(0.23, 1, 0.32, 1)` (`--ease-out`) with a short duration of 120-160ms. This creates immediate visual response on press with a soft settle, confirming the interaction without delay.

### Why should I avoid `ease-in` completely in UI animations?

`ease-in` starts slow and accelerates, which delays the moment the user sees motion begin. According to [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md), this makes interactions feel sluggish and unresponsive. The repository flags any `ease-in` usage as a mandatory replacement finding.

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

Use `--ease-out` (`0.23, 1, 0.32, 1`) for elements entering or leaving the viewport — the fast start delivers responsiveness. Use `--ease-in-out` (`0.77, 0, 0.175, 1`) for elements moving between visible positions, where the acceleration/deceleration pattern feels more natural for longer travel distances.

### What duration should I pair with these easing curves?

The repository recommends keeping all UI animations under **300ms**. Pair `--ease-out` with 160-250ms for entrances, `--ease-drawer` with 250-300ms for panel slides, and reserve shorter 120-200ms durations for hover states and micro-interactions.