〰️ CSS Easing और एनिमेशन टाइमिंग जेनरेटर

Design CSS cubic-bezier easing curves visually. Drag handles, preview animations, pick from presets like ease, ease-in-out, spring. Copy CSS free.

Drag the two bezier control points to shape your animation curve, or pick from preset easings (ease, spring, bounce). The preview animates a ball using your curve so you see exactly how it feels — then copy the cubic-bezier() value for your CSS transition or animation.

How to Use

1

Drag the control points

Click and drag the two colored handles on the SVG canvas to define your easing curve shape.

2

Preview the animation

Click Play to see a box animate using your cubic-bezier curve. Try preset buttons for common easings.

3

Copy the function

Click Copy to copy the cubic-bezier() value. Use it in your CSS transition or animation.

Frequently Asked Questions

What is cubic-bezier in CSS? +
cubic-bezier() is a CSS timing function that controls the speed curve of transitions and animations. It takes four values (P1x, P1y, P2x, P2y) that define two control points of a Bézier curve between (0,0) and (1,1).
What do the four values in cubic-bezier mean? +
The four values are x1, y1, x2, y2 — the coordinates of two control points. x values must be between 0 and 1 (they represent time). y values can be outside 0–1, which creates bounce or overshoot effects.
What are the built-in CSS easing functions? +
ease is cubic-bezier(0.25,0.1,0.25,1). ease-in is cubic-bezier(0.42,0,1,1). ease-out is cubic-bezier(0,0,0.58,1). ease-in-out is cubic-bezier(0.42,0,0.58,1). linear is cubic-bezier(0,0,1,1).
How do I create a bounce animation with cubic-bezier? +
Set y values outside the 0–1 range to create overshoot. For example, cubic-bezier(0.34,1.56,0.64,1) creates a spring-like bounce where the element overshoots and settles back.
Where can I use cubic-bezier in CSS? +
Use it in the transition-timing-function or animation-timing-function properties. Example: transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94).


संपूर्ण गाइड: CSS Cubic Bezier Generator

CSS Cubic Bezier Generator क्या है?

CSS Cubic Bezier Generator custom animation timing functions visually create करता है। CSS transition-timing-function और animation-timing-function bezier curves से control होती हैं। ease, linear, ease-in, ease-out predefined values हैं — custom bezier से unique feels create होते हैं।

Format: cubic-bezier(x1, y1, x2, y2) जहाँ control points animation की "personality" define करते हैं।

कैसे उपयोग करें

  1. Control points drag करें visual curve editor में।
  2. Animation preview देखें।
  3. Preset library browse करें: bounce, elastic, etc।
  4. CSS value copy करें।

Pro Tips

Related Tools

🪟
CSS Glassmorphism Generator
css
⏳
CSS Loader Generator
css
▣
CSS Border Radius Generator
css
🌊
Tailwind ↔ CSS Converter
converter
🧰 50+ Tools