CSS एनिमेशन-टाइमिंग-फ़ंक्शन संपत्ति
उदाहरण
शुरू से अंत तक समान गति से एनिमेशन चलाएं:
div {
animation-timing-function: linear;
}
नीचे और अधिक "इसे स्वयं आज़माएं" उदाहरण।
परिभाषा और उपयोग
एनीमेशन की animation-timing-function
गति वक्र निर्दिष्ट करता है।
गति वक्र उस समय को परिभाषित करता है जो एक एनीमेशन सीएसएस शैलियों के एक सेट से दूसरे में बदलने के लिए उपयोग करता है।
गति वक्र का उपयोग परिवर्तनों को सुचारू रूप से करने के लिए किया जाता है।
डिफ़ॉल्ट मान: | आराम |
---|---|
विरासत में मिला: | नहीं |
एनिमेटेबल: | नहीं। एनिमेटेबल के बारे में पढ़ें |
संस्करण: | CSS3 |
जावास्क्रिप्ट सिंटैक्स: | ऑब्जेक्ट .style.animationTimingFunction = "रैखिक" |
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से संपत्ति का समर्थन करता है।
-वेबकिट-, -मोज़-, या -ओ- के बाद नंबर एक उपसर्ग के साथ काम करने वाले पहले संस्करण को निर्दिष्ट करें।
Property | |||||
---|---|---|---|---|---|
animation-timing-function | 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- |
सीएसएस सिंटेक्स
animation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;
एनीमेशन-टाइमिंग-फ़ंक्शन एक गणितीय फ़ंक्शन का उपयोग करता है, जिसे क्यूबिक बेज़ियर वक्र कहा जाता है, गति वक्र बनाने के लिए। आप इस फ़ंक्शन में अपने स्वयं के मानों का उपयोग कर सकते हैं, या पूर्व-निर्धारित मानों में से किसी एक का उपयोग कर सकते हैं:
सम्पत्ति की कीमत
Value | Description | Play it |
---|---|---|
linear | The animation has the same speed from start to end | |
ease | Default value. The animation has a slow start, then fast, before it ends slowly | |
ease-in | The animation has a slow start | |
ease-out | The animation has a slow end | |
ease-in-out | The animation has both a slow start and a slow end | |
step-start | Equivalent to steps(1, start) | |
step-end | Equivalent to steps(1, end) | |
steps(int,start|end) | Specifies a stepping function, with two parameters. The first parameter specifies the number of intervals in the function. It must be a positive integer (greater than 0). The second parameter, which is optional, is either the value "start" or "end", and specifies the point at which the change of values occur within the interval. If the second parameter is omitted, it is given the value "end" | |
cubic-bezier(n,n,n,n) | Define your own values in the cubic-bezier function Possible values are numeric values from 0 to 1 |
|
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
युक्ति: नीचे दिए गए "अधिक उदाहरण" अनुभाग में विभिन्न मानों को आज़माएं।
और ज्यादा उदाहरण
उदाहरण
विभिन्न समय समारोह मूल्यों को बेहतर ढंग से समझने के लिए;
यहां पांच अलग-अलग <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;}
उदाहरण
ऊपर दिए गए उदाहरण के समान, लेकिन गति वक्र को क्यूबिक-बेज़ियर फ़ंक्शन के साथ परिभाषित किया गया है:
#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);}
संबंधित पृष्ठ
सीएसएस ट्यूटोरियल: सीएसएस एनिमेशन
एचटीएमएल डोम संदर्भ: एनीमेशनटाइमिंगफंक्शन संपत्ति