Cubic Bezier Generator

Do control points drag karke ek CSS cubic-bezier() easing curve shape karein, motion preview karein, aur timing function copy karein — sab aapke browser mein.

Cubic Bezier Generator poori tarah aapke browser mein chalta hai. Jo curve aap drag karte hain, animation preview, aur generated cubic-bezier() CSS kabhi aapke device se bahar nahi jaate aur kuch bhi ArrayKit ko upload nahi hota.

CSS Formatter kholein

Cubic Bezier Generator ke baare mein

Cubic Bezier Generator aapko ek live plot par apne do control points drag karke ek CSS easing curve shape karne deta hai, phir aapke transition ya animation ke liye exact cubic-bezier(x1, y1, x2, y2) timing function copy karta hai. ease, ease-in-out, ya ek bouncy ease-out-back jaise named presets se shuru karein, phir mouse ya arrow keys se handles fine-tune karein. Ek animated dot aapki curve real time mein play karta hai taaki aap paste karne se pehle acceleration mehsoos kar sakein. Yeh un front-end developers aur designers ke liye bana hai jo ek transition-timing-function ya animation-timing-function ke liye motion tune karte hain, numbers guess kiye bina. Sab kuch aapke device par render hota hai — curve, preview, aur generated CSS kabhi aapke browser se bahar nahi jaate.

Features

Cubic Bezier Generator kaise use karein

  1. Ek starting point ke roop mein ease-in-out jaisa ek preset pick karein
  2. Curve reshape karne ke liye koi bhi control point drag karein, ya use arrow keys se nudge karein
  3. Jo acceleration aapne banaya use mehsoos karne ke liye animated preview dekhein
  4. cubic-bezier() value ya poora transition-timing-function rule copy karein
  5. Use apne CSS transition ya animation shorthand mein paste karein

Example

Input

control point 1: 0.34, 1.56
control point 2: 0.64, 1

Output

.card {
  transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

Ek ease-out-back curve ek subtle bounce ke liye 1 se aage overshoot karti hai.

Common errors aur troubleshooting

Aksar pooche jaane wale sawaal

cubic-bezier() mein chaar numbers ka kya matlab hai?
Woh do control points ke x aur y coordinates hain: cubic-bezier(x1, y1, x2, y2). Curve ka start aur end (0,0) aur (1,1) par fixed hai, aur yeh do handles un ke beech path ko bend karke set karte hain ki animation kaise accelerate karta hai.
x values 0 aur 1 ke beech kyun rehni chahiye?
CSS mein x axis time ke oopar animation progress hai, jo sirf aage badhta hai. x1 aur x2 ko 0 se 1 mein rakhna guarantee karta hai ki curve har moment par ek single value represent kare. y overshoot ya anticipation banane ke liye us range ke bahar ja sakti hai.
Main ek bouncy ya overshoot easing kaise banaoon?
Ek control point ko 1 se badi ya 0 se chhoti y dein. Jaise cubic-bezier(0.34, 1.56, 0.64, 1) settle hone se pehle end ke aage overshoot karta hai, jo ek gentle bounce ki tarah padha jaata hai. Aisa karne ke liye ek handle ko plot ke oopar ya neeche drag karein.
ease aur ease-in-out mein kya farak hai?
ease cubic-bezier(0.25, 0.1, 0.25, 1) hai aur ease-in-out se thoda tez shuru hota hai, jo cubic-bezier(0.42, 0, 0.58, 1) hai aur symmetric hai. ease-in-out evenly ramp up aur slow down karta hai, jabki ease motion ko thoda front-load karta hai.
Kya main is value ko animation-timing-function ke liye bhi use kar sakta hoon?
Haan. Ek cubic-bezier() kahin bhi kaam karta hai jahan CSS ek easing function accept karta hai, jismein transition-timing-function, animation-timing-function, aur transition aur animation shorthands ka timing slot shaamil hai.
Kya curve drag karna ek server ko kuch bhejta hai?
Nahi. Editor, animated preview, aur generated CSS sab aapke browser mein plain JavaScript se compute hote hain. Aapki curve ke baare mein kuch bhi ArrayKit ko upload nahi hota.

Related tools

Saare ArrayKit tools