CSS ట్రాన్సిషన్

CSS ట్రాన్సిషన్

CSS 过渡允许您在给定的时间内平滑地改变属性值。

请把鼠标移动到这个元素上，来查看 CSS 过渡效果：

CSS

在本章中，您将学习如下属性：

  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function

对过渡的浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

లక్షణాలు చ్రోమ్ ఐఈ ఫైర్ఫాక్స్ సఫారీ ఓపెరా
transition 26.0 10.0 16.0 6.1 12.1
transition-delay 26.0 10.0 16.0 6.1 12.1
transition-duration 26.0 10.0 16.0 6.1 12.1
transition-property 26.0 10.0 16.0 6.1 12.1
transition-timing-function 26.0 10.0 16.0 6.1 12.1

CSS ట్రాన్సిషన్ నిర్వహించడం ఎలా ఉంటుంది?

ట్రాన్సిషన్ ప్రభావాన్ని సృష్టించడానికి, మీరు రెండు విషయాలను తెలుసుకోవాలి:

  • మీరు అనునది ప్రభావాన్ని జోడించాలి ఉన్న CSS అనునది విలువ
  • ప్రభావం కాలం

గమనిక:సమయం పారితోంది పార్టు నిర్దేశించకపోతే, ట్రాన్సిషన్ ప్రభావం ఉండదు, ఎందుకంటే డిఫాల్ట్ విలువ 0 ఉంది.

ఈ ఉదాహరణలో, 100px * 100px విస్తీర్ణం కలిగిన ఎరుపు రంగు కలిగిన <div> ఎలిమెంట్ చూడండి. <div> ఎలిమెంట్ కూడా width అనునది పేరుతో ట్రాన్సిషన్ ప్రభావాన్ని నిర్దేశించింది, దాని కాలం 2 సెకన్లు ఉంది:

ఉదాహరణ

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

నిర్దేశించబడిన CSS అనునది విలువ (width) మారితే, ట్రాన్సిషన్ ప్రారంభం అవుతుంది.

ఇప్పుడు, width అనునది పేరుతో మౌస్ హోవర్ పైన ఉన్నప్పుడు కొత్త విలువను నిర్దేశించండి:

ఉదాహరణ

div:hover {
  width: 300px;
}

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

మీరు ద్రష్టి కిరణం ఎలిమెంట్ నుండి వెళ్ళిపోతే, దాని మొదటి రూపం కి క్రమంగా తిరిగి వస్తుంది.

పలు లక్షణాల విలువలను మార్చండి

ఈ ఉదాహరణలో width లక్షణానికి 2 నిమిషాలు మరియు height లక్షణానికి 4 నిమిషాలు ట్రాన్సిషన్ ప్రభావాన్ని జోడించారు:

ఉదాహరణ

div {
  transition: width 2s, height 4s;
}

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

ట్రాన్సిషన్ వేగం కోణాన్ని నిర్దేశించండి

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

transition-timing-function లక్షణం ఈ విలువలను అంగీకరిస్తుంది:

  • ease - ప్రారంభం నుండి ముగింపు వరకు వేగం సమానంగా ఉండే ట్రాన్సిషన్ ప్రభావాన్ని నిర్దేశిస్తుంది (డిఫాల్ట్)
  • linear - ప్రారంభం నుండి ముగింపు వరకు వేగం సమానంగా ఉండే ట్రాన్సిషన్ ప్రభావాన్ని నిర్దేశిస్తుంది
  • ease-in - ప్రారంభం వేగం తక్కువగా ఉండే ట్రాన్సిషన్ ప్రభావాన్ని నిర్దేశిస్తుంది
  • ease-out - ముగింపు వేగం తక్కువగా ఉండే ట్రాన్సిషన్ ప్రభావాన్ని నిర్దేశిస్తుంది
  • ease-in-out - ప్రారంభం మరియు ముగింపు వేగం తక్కువగా ఉండే ట్రాన్సిషన్ ప్రభావాన్ని నిర్దేశిస్తుంది
  • cubic-bezier(n,n,n,n) - మీరు మూడు క్యూబిక్ బేసెల్ ఫంక్షన్స్ లో స్వంతంగా విలువలను నిర్దేశించవచ్చు

ఈ ఉదాహరణలో ఉపయోగించవచ్చు వివిధ వేగం కోణాలను చూపిస్తుంది:

ఉదాహరణ

#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;}

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

పాటించే ట్రాన్సిషన్ ప్రభావం

transition-delay లక్షణం ట్రాన్సిషన్ ప్రభావానికి పాటించే నిమిషాలను నిర్దేశిస్తుంది (నిమిషాలలో).

ఈ ఉదాహరణలో ప్రారంభం ముందు 1 నిమిషం పాటు పాటించే పాటించే నిమిషం ఉంది:

ఉదాహరణ

div {
  transition-delay: 1s;
}

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

ట్రాన్సిషన్ + ట్రాన్స్ఫార్మ్

ఈ ఉదాహరణలో ట్రాన్స్ఫార్మ్ నిర్వహణకు ట్రాన్సిషన్ ప్రభావాన్ని జోడించారు:

ఉదాహరణ

div {
  transition: width 2s, height 2s, transform 2s;
}

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

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

మీరు CSS ట్రాన్సిషన్ లక్షణాలను ఈ ప్రకారం ఒకొకొకటి నిర్దేశించవచ్చు:

ఉదాహరణ

div {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

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

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

ఉదాహరణ

div {
  transition: width 2s linear 1s;
}

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

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

ఈ పట్టిక అన్ని CSS ట్రాన్సిషన్ లక్షణాలను జాబితాభూతంచేస్తుంది:

లక్షణాలు వివరణ
transition 简写属性，用于将四个过渡属性设置为单一属性。
transition-delay 规定过渡效果的延迟（以秒计）。
transition-duration 规定过渡效果要持续多少秒或毫秒。
transition-property 规定过渡效果所针对的 CSS 属性的名称。
transition-timing-function 规定过渡效果的速度曲线。