सीएसएस एनीमेशन संपत्ति
उदाहरण
आशुलिपि संपत्ति का उपयोग करके एक एनीमेशन को <div> तत्व से बांधना:
div
{
animation: mymove 5s infinite;
}
परिभाषा और उपयोग
संपत्ति के animation
लिए एक आशुलिपि संपत्ति है:
- एनिमेशन-नाम
- एनिमेशन-अवधि
- एनिमेशन-टाइमिंग-फ़ंक्शन
- एनिमेशन-देरी
- एनिमेशन-पुनरावृत्ति-गिनती
- एनिमेशन-दिशा
- एनिमेशन-भरने-मोड
- एनिमेशन-प्ले-स्टेट
नोट: हमेशा ऐनिमेशन-अवधि गुण निर्दिष्ट करें, अन्यथा अवधि 0 है, और इसे कभी नहीं चलाया जाएगा।
डिफ़ॉल्ट मान: | कोई नहीं 0 आराम 0 1 सामान्य कोई नहीं चल रहा है |
---|---|
विरासत में मिला: | नहीं |
एनिमेटेबल: | नहीं। एनिमेटेबल के बारे में पढ़ें |
संस्करण: | CSS3 |
जावास्क्रिप्ट सिंटैक्स: | वस्तु .style.animation = "mymove 5s अनंत" |
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से संपत्ति का समर्थन करता है।
-वेबकिट-, -मोज़-, या -ओ- के बाद नंबर एक उपसर्ग के साथ काम करने वाले पहले संस्करण को निर्दिष्ट करें।
Property | |||||
---|---|---|---|---|---|
animation | 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: name duration timing-function delay iteration-count
direction fill-mode play-state;
सम्पत्ति की कीमत
Value | Description |
---|---|
animation-name | Specifies the name of the keyframe you want to bind to the selector |
animation-duration | Specifies how many seconds or milliseconds an animation takes to complete |
animation-timing-function | Specifies the speed curve of the animation |
animation-delay | Specifies a delay before the animation will start |
animation-iteration-count | Specifies how many times an animation should be played |
animation-direction | Specifies whether or not the animation should play in reverse on alternate cycles |
animation-fill-mode | Specifies what values are applied by the animation outside the time it is executing |
animation-play-state | Specifies whether the animation is running or paused |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
संबंधित पृष्ठ
सीएसएस ट्यूटोरियल: सीएसएस एनिमेशन
HTML DOM संदर्भ: एनिमेशन गुण