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

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, the repository explicitly rejects ease, ease-in, ease-out, and ease-in-out as insufficient for polished interfaces.

The 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 and are reinforced throughout skills/review-animations/SKILL.md and skills/animate/SKILL.md.

Defining Easing Tokens in Your Codebase

Create a global tokens file, typically at src/styles/tokens.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 and referenced in 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:

.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 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:

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.

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 and skills/animate/RECIPES.md

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

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

This handling appears in 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 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 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

• Never use ease-in on UI elements — it creates perceived lag and violates the repository's audit rules from 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 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 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.

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 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}