CSS ట్రాన్సిషన్ అట్రిబ్యూట్

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

transition లక్షణం నాలుగు ట్రాన్సిషన్ లక్షణాలను అమర్చడానికి ఉపయోగించే ఒక సరళ లక్షణం ఉంది:

నోటీసు:ఎల్లప్పుడూ అమర్చండి transition-duration ఇల్లా లక్షణం సెట్ చేయకపోతే, దాని కాలం 0 కాకపోతే ట్రాన్సిషన్ ప్రభావం ఉండదు.

మరింత చూడండి:

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

HTML DOM సందర్భాల పరిశీలనా కురికి:transition లక్షణం

ప్రతిమ

మౌస్ పింటర్ను div మెటీరియల్ పైకి నిలిపించండి, అప్పుడు దాని వెడల్పు 100px నుండి 300px గా క్రమంగా మారుతుంది:

div {
  width: 100px;
  transition: width 2s;
}

మీరు ప్రయత్నించండి

CSS సంకేతపత్రం

transition: ప్రపర్టీ డ్యూరేషన్ టైమింగ్-ఫంక్షన్ డిలే;

లక్షణ విలువ

విలువ వివరణ
transition-property ట్రాన్సిషన్ ప్రభావాన్ని అమర్చే CSS లక్షణాన్ని నిర్వచిస్తుంది.
transition-duration ట్రాన్సిషన్ ప్రభావం పూర్తి కావడానికి అవసరమైన సెకన్లు లేదా మిల్లీసెకన్లను నిర్వచిస్తుంది.
transition-timing-function వేగం ప్రభావం యొక్క వేగాన్ని నిర్వచిస్తుంది.
transition-delay ట్రాన్సిషన్ ప్రభావం ఎప్పుడు మొదలుపెడటాన్ని నిర్వచిస్తుంది.

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

అప్రమేయం: all 0 ease 0
వారసత్వం: no
వెర్షన్: CSS3
JavaScript సంకేతపత్రం: object.style.transition="width 2s"

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

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

ప్రథమ వెర్షన్లను ఉపయోగించడానికి -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-