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- के साथ बदला हुआ आंकड़े इसके पूर्णतः समर्थित पहले ब्राउज़र संस्करण को प्रदर्शित करते हैं。

च्रोम आईई / एजेंडा फ़ायरफ़ॉक्स सैफारी ओपेरा
26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-