CSS ట్రాన్సిషన్-టైమింగ్-ఫంక్షన్ అట్రిబ్యూట్

నిర్వచనం మరియు వినియోగం

transition-timing-function అటువంటి విలువ ట్రాన్సిషన్ ప్రభావాన్ని వేగక్రమం నిర్వచిస్తుంది.

ఈ అటువంటి విలువ ప్రభావాన్ని కాలక్రమంతో మార్చేందుకు అనుమతిస్తుంది.

మరియు ఇతర పరిశీలనలకు కూడా చూడండి:

CSS శిక్షణ కురాన్ని:CSS ట్రాన్సిషన్

HTML DOM పరిశీలన కురాన్ని:transitionTimingFunction అటువంటి విలువ

ఉదాహరణ

ఉదాహరణ 1

ప్రారంభం మరియు ముగింపులో ఒకే వేగంతో ప్రవేశం చేసే ట్రాన్సిషన్ ప్రభావాన్ని నిర్వచించండి:

div
{
transition-timing-function: linear;
}

స్వయంగా ప్రయోగించండి

CSS శబ్దకోశ

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n);

అటువంటి విలువ

విలువ వివరణ
linear ప్రారంభం మరియు ముగింపులో ఒకే వేగంతో ప్రవేశం చేసే ట్రాన్సిషన్ ప్రభావాన్ని నిర్వచించండి (సమానంగా cubic-bezier(0,0,1,1)).
ఇజ్ ప్రారంభంలో వేగంగా ప్రవేశం చేసి, తరువాత వేగంగా మారి, తరువాత మళ్ళీ వేగంగా ముగింపు చేసే ట్రాన్సిషన్ ప్రభావాన్ని నిర్వచించండి (cubic-bezier(0.25,0.1,0.25,1)).
ease-in ప్రారంభంలో వేగంగా ప్రవేశం చేసే ట్రాన్సిషన్ ప్రభావాన్ని నిర్వచించండి (సమానంగా cubic-bezier(0.42,0,1,1)).
ease-out ముగింపులో వేగంగా ప్రవేశం చేసే ట్రాన్సిషన్ ప్రభావాన్ని నిర్వచించండి (సమానంగా cubic-bezier(0,0,0.58,1)).
ease-in-out ప్రారంభం మరియు ముగింపులో వేగంగా ప్రవేశం చేసే ట్రాన్సిషన్ ప్రభావాన్ని నిర్వచించండి (సమానంగా cubic-bezier(0.42,0,0.58,1)).
cubic-bezier(n,n,n,n) స్వయంగా cubic-bezier ఫంక్షన్ లో విలువలను నిర్వచించండి. అనుకొనుటకు వచ్చే విలువలు 0 నుండి 1 వరకు ఉంటాయి.

సలహా:ఈ ఉదాహరణలో వివిధ విలువలను ప్రయోగించండి, అలా వాటి పనిముద్రను మరింత బాగా అర్థం చేసుకోండి.

సాంకేతిక వివరాలు

మూల విలువ: ఇజ్
పారంపర్యం కాకుండా: లేదు
సంస్కరణ: CSS3
జావాస్క్రిప్ట్ సంకేతాలు: ఆబ్జెక్ట్.style.transitionTimingFunction="linear"

మరిన్ని ఉదాహరణలు

ఉదాహరణ 2

వివిధ ఫంక్షన్ విలువలను మరింత బాగా అర్థం చేసుకోవడానికి ముందుకు ముందు ఐదు విలువలతో కూడిన ఐదు వివిధ div మెటాడ్స్ చూడండి:

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

స్వయంగా ప్రయోగించండి

ఉదాహరణ 3

ఈ ఉదాహరణలో అదే, కానీ cubic-bezier ద్వారా వేగం కోణాలను నిర్ణయించడానికి ఉపయోగించబడుతుంది:

#div1 {transition-timing-function: cubic-bezier(0,0,1,1);}
#div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}

స్వయంగా ప్రయోగించండి

బ్రౌజర్ మద్దతు

ఈ పట్టికలో ఉన్న సంఖ్యలు ఈ అనుసంధానాన్ని పూర్తిగా మద్దతు ఇస్తున్న మొదటి బ్రౌజర్ సంస్కరణను సూచిస్తాయి.

ఈ సంఖ్యలు మొదటి సంస్కరణలో ప్రత్యేకంగా ముందుకు ముందు ముందు ఉపయోగించబడుతున్న సంఖ్యలను సూచిస్తాయి కాబట్టి -webkit-,-moz- లేదా -o- తో కలిపి ఉన్నాయి.

క్రోమ్ IE / ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఓపెరా
26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-