सीएसएस एनीमेशन-टाइमिंग-फ़ंक्शन गुण

定义和用法

animation-timing-function 规定动画的速度曲线。

速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。

速度曲线用于使变化更为平滑。

अन्य संदर्भ देखें:

CSS3 शिक्षा:CSS एनिमेशन

HTML DOM संदर्भ दस्तावेज़:animationTimingFunction गुण

उदाहरण

उदाहरण 1

एनिमेशन को शुरू से अंत तक एकसमान गति से प्ले करें:

div
{
animation-timing-function:2s;
}

स्वयं अनुभव करें

उदाहरण 2

विभिन्न समय-कार्यक्रम मानों को बेहतर रूप से समझने के लिए, यहाँ पांच अलग-अलग मानों वाले पांच अलग-अलग div एलीमेंट दिए गए हैं:

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

स्वयं अनुभव करें

उदाहरण 3

इसके समान ही है, लेकिन cubic-bezier फ़ंक्शन के द्वारा गति ग्राफ को परिभाषित करता है:}

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

स्वयं अनुभव करें

सीएसएस ग्रामरा

animation-timing-function: value;

animation-timing-function गुण को तीन बीजेसर (Cubic Bezier) कालनीकी फ़ंक्शन के रूप में सामान्य मूल्य का प्रयोग करके गति ग्राफ को उत्पन्न करता है। आप इस फ़ंक्शन में अपने मूल्यों को अंतरित कर सकते हैं और पूर्व-परिभाषित मूल्यों को भी इस्तेमाल कर सकते हैं:

मूल्य वर्णन परीक्षण
linear एनिमेशन की गति से शुरू से समाप्त तक एकसमान है。 परीक्षण
सहज डिफ़ॉल्ट। एनिमेशन आरंभ से नीचे की गति से शुरू होती है और फिर तेज़ होती है, और समाप्त होने से पहले धीमा होती है。 परीक्षण
ease-in एनिमेशन आरंभ होने के समय नीचे की गति से होती है。 परीक्षण
ease-out एनिमेशन समाप्त होने के समय नीचे की गति से होती है。 परीक्षण
ease-in-out एनिमेशन आरंभ से नीचे की गति से शुरू होती है और समाप्त होती है。 परीक्षण
cubic-bezier(n,n,n,n) cubic-bezier फ़ंक्शन में अपने मूल्यों को अंतरित करें। संभावित मूल्य 0 से 1 के बीच के संख्याएं हैं。

सूचना:कृपया नीचे दिए 'स्वयं अनुभव करें' फ़ंक्शन में अलग-अलग मूल्यों का प्रयोग करके प्रयास करें。

तकनीकी विवरण

डिफ़ॉल्ट वैल्यू: सहज
विरासतीयता: नहीं
संस्करण: सीएसएस3
जेसक्रिप्ट ग्रामरा: ऑब्जेक्ट.style.animationTimingFunction="linear"

ब्राउज़र समर्थन

तालिका में दिए संख्याएं इस गुण के पूर्ण समर्थन वाली पहली ब्राउज़र संस्करण को इंगित करती हैं。

सभी -webkit-、-moz- या -o- के साथ संख्याओं को पहली संस्करण के प्रयोग वाले प्रीफिक्स के रूप में प्रदर्शित किया जाता है。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.0 -o-