CSS క్యూబిక్ బెజియర్ జనరేటర్

CSS క్యూబిక్ బెజియర్ జనరేటర్ సడలింపు విధులను సృష్టించండి

కంట్రోల్ పాయింట్ లు

Point P1 (x1, y1)

0 0.25 1
0 0.1 1

Point P2 (x2, y2)

0 0.25 1
0 1 1

పాపులర్ ఈజింగ్ ప్రీసెట్ లు

CSS Output

cubic-bezier(0.25, 0.1, 0.25, 1)

Preview

Duration: 500ms

Bezier Curve Visualization

time (1) easing (1) easing (0) P0 (0, 1) P1 (0.25, 0.1) P2 (0.25, 1) P3 (1, 1)

x1

0.25

y1

0.1

x2

0.25

y2

1

Cubic Bezier Documentation

క్యూబిక్ బెజియర్ కర్వ్ అంటే ఏమిటి?

A cubic Bezier curve is defined by four points: P0, P1, P2, and P3. In CSS transitions, P0 and P3 are fixed at (0, 0) and (1, 1) respectively, representing the start and end of the transition. The curve is determined by the coordinates of the two control points, P1 and P2.

CSS సింటాక్స్

transition-timing-function: cubic-bezier(x1, y1, x2, y2);

సాధారణ వినియోగ కేసులు

  • యానిమేటెడ్ పరివర్తనలు:ప్రాపర్టీలను మార్చే ఎలిమెంట్ ల కొరకు స్మూత్ యానిమేషన్ లను సృష్టించండి.
  • స్క్రోల్ ప్రభావాలు:స్క్రోల్ యానిమేషన్ ల వేగాన్ని నియంత్రించండి.
  • ఇంటరాక్టివ్ ఎలిమెంట్స్:హ్యావింగ్ లేదా క్లిక్ చేయడం వంటి యూజర్ ఇంటరాక్షన్ లకు ఎలిమెంట్ లు ఏవిధంగా ప్రతిస్పందిస్తాయో నిర్వచించండి.
  • మోషన్ డిజైన్:UI ఎలిమెంట్ ల కొరకు సంక్లిష్ట మోషన్ సీక్వెన్స్ లను క్రాఫ్ట్ చేయండి.

పాపులర్ ఈజింగ్ ఫంక్షన్లు

Ease (default)

నెమ్మదిగా ప్రారంభమవుతుంది, వేగంగా వేగవంతం అవుతుంది, ఆపై మళ్లీ నెమ్మదిస్తుంది.

cubic-bezier(0.25, 0.1, 0.25, 1)

Linear

ప్రారంభం నుండి చివరి వరకు స్థిరమైన వేగం.

cubic-bezier(0, 0, 1, 1)

Ease-in

నెమ్మదిగా మొదలై, ఆ తర్వాత వేగవంతమవుతుంది.

cubic-bezier(0.42, 0, 1, 1)

Ease-out

వేగంగా మొదలై, ఆ తర్వాత క్షీణిస్తుంది.

cubic-bezier(0, 0, 0.58, 1)

కస్టమ్ కర్వ్స్ సృష్టించడానికి చిట్కాలు

  1. x విలువలను 0 మరియు 1 మధ్య ఉంచండి:ఈ పరిధి వెలుపల విలువలు ఊహించని ప్రవర్తనకు కారణమవుతాయి.
  2. వక్రతను విజువలైజ్ చేయండి:మార్పులు యానిమేషన్ ను ఎలా ప్రభావితం చేస్తాయో అర్థం చేసుకోవడానికి ఇంటరాక్టివ్ గ్రాఫ్ ఉపయోగించండి.
  3. నిజమైన అంశాలతో పరీక్ష:మీ కర్వ్ సరిగ్గా ఉందని నిర్ధారించుకోవడానికి ఎల్లప్పుడూ నిజమైన UI కాంపోనెంట్ లతో ప్రివ్యూ చేయండి.
  4. ప్రీసెట్ లను సేవ్ చేయండి:భవిష్యత్ ప్రాజెక్టులకు ఉపయోగపడే మలుపులను బుక్ మార్క్ చేయండి.

Related Tools

SCSS నుంచి CSS కన్వర్టర్ వరకు

మీ ఎస్సీఎస్ఎస్ కోడ్ను సీఎస్ఎస్గా మార్చండి. వేగవంతమైన, సులభమైన మరియు సురక్షితమైనది.

CSS కన్వర్టర్ కు తక్కువ

మీ లెస్ కోడ్ ని CSS గా మార్చండి. వేగవంతమైన, సులభమైన మరియు సురక్షితమైనది.

సులభంగా CSS3 రూపాంతరాలను జనరేట్ చేయండి

సంక్లిష్టమైన CSS3ని సృష్టించడానికి ఒక శక్తివంతమైన, సహజమైన సాధనం కోడ్ రాయకుండానే రూపాంతరం చెందుతుంది. రియల్ టైమ్ లో మార్పులను విజువలైజ్ చేయండి మరియు మీ ప్రాజెక్ట్ ల్లో ఉపయోగించడం కొరకు జనరేట్ చేయబడ్డ CSSను కాపీ చేయండి.

దశాంశానికి టెక్స్ట్

టెక్స్ట్ ని అప్రయత్నంగా దశాంశ ప్రాతినిధ్యానికి మార్చండి

Bytes Unit Converter

డిజిటల్ సమాచారం యొక్క విభిన్న యూనిట్ల మధ్య ఖచ్చితత్వంతో మార్చండి

కస్టమ్ డిస్క్లైమర్లను సృష్టించండి

మీ వెబ్ సైట్, అనువర్తనం లేదా సేవకు అనుగుణంగా సమగ్ర డిస్క్లైమర్లను జనరేట్ చేయండి.