CSS Cubic Bezier జనరేటర్
ఈసింగ్ కర్వ్ను రూపొందించడానికి రెండు హ్యాండిల్లను లాగండి, స్థిరమైన చలనంతో పోల్చి చూడండి మరియు cubic-bezier() విలువను కాపీ చేయండి.
cubic-bezier(0.25, 0.1, 0.25, 1)కర్వ్ నేరుగా మీ బ్రౌజర్లోనే డ్రా చేయబడుతుంది. మీ సమాచారం ఏదీ BroBroGo కి అప్లోడ్ చేయబడదు.
తరచుగా అడిగే ప్రశ్నలు
రెండు హ్యాండిల్లు మరియు నాలుగు సంఖ్యల అర్థం ఏమిటి?
కర్వ్ దిగువ-ఎడమ (ప్రారంభం) నుండి ఎగువ-కుడి (ముగింపు) వరకు నడుస్తుంది, సమయం ఎడమ నుండి కుడికి మరియు పురోగతి పైకి వెళ్తుంది. రెండు హ్యాండిల్లు దీన్ని వంచే నియంత్రణ పాయింట్లు — ప్రతిదానికి ఒక X మరియు Y ఉంటాయి, కాబట్టి కలిసి అవి cubic-bezier(x1, y1, x2, y2) అవుతాయి. X ఎల్లప్పుడూ 0 మరియు 1 మధ్య ఉంటుంది, అయితే Y పైకి లేదా క్రిందికి వెళ్ళవచ్చు, దీనివల్ల చలనం స్థిరపడటానికి ముందు ఓవర్షూట్ లేదా వెనక్కి లాగడం జరుగుతుంది.
నా CSSలో ఈ విలువను ఎలా ఉపయోగించాలి?
cubic-bezier() ని కాపీ చేసి, టైమింగ్ ఫంక్షన్ ఉపయోగించే ఎక్కడైనా ఉంచండి — transition-timing-function, animation-timing-function, లేదా షార్ట్హ్యాండ్, ఉదా. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). ease, ease-in, ease-out మరియు ease-in-out కీవర్డ్లు కేవలం స్థిరమైన cubic-bezier కర్వ్లు మాత్రమే, కాబట్టి ఆ ప్రీసెట్లలో ఒకదాన్ని ఎంచుకుంటే ఆ కీవర్డ్ వెనుక ఉన్న ఖచ్చితమైన విలువ మీకు కనిపిస్తుంది.
ఇది బౌన్స్ లేదా ఎలాస్టిక్ ప్రభావాన్ని సృష్టించగలదా?
స్వయంగా చేయలేదు. ఒకే cubic-bezier యాంటిసిపేట్ మరియు ఓవర్షూట్ చేయగలదు — "back" ప్రీసెట్లు సరిగ్గా అదే చేయడానికి ఒక హ్యాండిల్ను బాక్స్ దాటి లాగుతాయి — కానీ ఇది ఒక వైపు మాత్రమే కదిలి ఆపై స్థిరపడగలదు. బౌన్స్ మరియు ఎలాస్టిక్ ప్రభావాలు దిశను చాలాసార్లు మారుస్తాయి, వీటిని ఒకే cubic-bezier వ్యక్తపరచలేదు; వాటికి CSS కీఫ్రేమ్లు లేదా అనేక స్టాప్లతో కూడిన linear() ఫంక్షన్ అవసరం.