What are CSS easing functions?

CSS easing functions are timing functions that control how an animation progresses over time. They define the acceleration curve - whether an animation starts slow and speeds up (ease-in), starts fast and slows down (ease-out), or combines both (ease-in-out). These functions create natural, smooth motion that enhances user experience.

What is a cubic-bezier curve?

A cubic-bezier curve is a mathematical function defined by four control points that creates smooth curves. In CSS, it's written as cubic-bezier(x1, y1, x2, y2) where x values represent time (0-1) and y values represent progression. This allows precise control over animation acceleration and deceleration patterns.

Difference between ease-in, ease-out, ease-in-out?

Ease-in animations start slowly and accelerate, creating anticipation before action. Ease-out animations start quickly and decelerate, providing immediate response with gentle settling. Ease-in-out combines both, starting and ending slowly with acceleration in the middle, creating the most natural motion for UI interactions.

What is linear easing?

Linear easing maintains constant speed throughout the animation with no acceleration or deceleration. It's defined as cubic-bezier(0, 0, 1, 1). Use it for progress bars, loading indicators, or any animation that should feel mechanical and consistent rather than natural.

How to use easing functions in Tailwind CSS?

Tailwind provides built-in easing classes like ease-linear, ease-in, ease-out, and ease-in-out. For custom curves, use arbitrary values: "ease-[cubic-bezier(0.4,0,0.2,1)]". You can also add custom easings to tailwind.config.js under transitionTimingFunction for reusable classes across your project.

How to copy easing values from this visualizer?

Click any easing curve card to copy its cubic-bezier values. You'll get the exact CSS values ready to paste into your Tailwind config or CSS files. Each card shows the curve name, visual preview, and the four control point values that define the timing function.

How to use easings in React and Framer Motion?

In Framer Motion, pass easing arrays to the transition prop: transition={{ ease: [0.4, 0, 0.2, 1] }}. You can also use named easings like "easeInOut" or create custom cubic-bezier arrays. Our visualizer provides values compatible with both CSS and JavaScript animation libraries.

Can I use custom cubic-bezier values in Tailwind?

Yes, Tailwind supports arbitrary values using square bracket notation: "ease-[cubic-bezier(0.68,-0.55,0.265,1.55)]". For reusable custom easings, extend your tailwind.config.js under theme.extend.transitionTimingFunction with named functions you can use throughout your project.

Which easing function should I use for buttons?

Use ease-out for button hover and click states. It provides immediate visual feedback (fast start) with a gentle settling effect (slow end). For button press animations, ease-out-cubic or ease-out-quart work well. Avoid ease-in for interactions as the delayed start feels unresponsive.

Best easing for modal and dialog animations?

Use ease-out for modal entrance (immediate appearance, gentle settle) and ease-in for exit (gentle start, quick disappear). For backdrop fades, ease-in-out works well. Duration should be 200-300ms for modals to feel responsive without being jarring.

What animation duration should I use?

Use 100-200ms for micro-interactions (hover, focus), 200-300ms for UI state changes (modals, dropdowns), 300-500ms for layout transitions, and 500-800ms for page transitions. Faster is usually better - if in doubt, make it shorter. Always test on mobile devices.

How to create smooth, professional animations?

Match easing to purpose: ease-out for entrances and interactions, ease-in for exits, ease-in-out for state changes. Keep durations short (under 300ms for most UI). Animate transform and opacity for best performance. Use consistent timing across your app for a cohesive feel.

What are overshoot easings like ease-out-back?

Overshoot easings (back, elastic) have y-values outside 0-1, causing the animation to temporarily exceed its final state before settling. Ease-out-back creates a slight bounce past the target. Use sparingly for playful UI elements, but avoid for serious or professional interfaces.

Performance impact of different easing functions?

Standard CSS easings are hardware-accelerated and perform identically. Complex cubic-bezier curves have negligible performance impact on modern browsers. The main performance concern is what you animate - stick to transform and opacity. Avoid animating layout properties like width, height, or margin.

How do easing functions work with CSS keyframes?

In CSS @keyframes, the timing function applies between each keyframe, not across the entire animation. Use animation-timing-function to set the default, or specify timing per-keyframe. For complex multi-step animations, you may need different easings between different keyframes.

Are these easings compatible with all browsers?

Yes, cubic-bezier timing functions are supported in all modern browsers including Chrome, Firefox, Safari, and Edge. They work with CSS transitions, CSS animations, and JavaScript animation APIs. The values are standard CSS and framework-agnostic, working with React, Vue, Angular, and vanilla JS.

CSS Easing Functions Visualizer

Explore and visualize CSS easing functions with real-time animation preview. Copy cubic-bezier curves instantly for Tailwind, React, and CSS projects.

Duration

Filter

Animation type

Easing Functions FAQ

Find answers to frequently asked questions about CSS easing functions, cubic-bezier curves, animation timing, and implementation best practices.