CSS @keyframes नियम
उदाहरण
एक तत्व को धीरे-धीरे 200px नीचे ले जाएँ:
@keyframes mymove
{
from {top: 0px;}
to {top: 200px;}
}
नीचे और अधिक "इसे स्वयं आज़माएं" उदाहरण।
परिभाषा और उपयोग
@keyframes
नियम एनिमेशन कोड निर्दिष्ट करता है ।
एनीमेशन सीएसएस शैलियों के एक सेट से दूसरे में धीरे-धीरे बदलकर बनाया गया है।
एनिमेशन के दौरान, आप कई बार CSS शैलियों के सेट को बदल सकते हैं।
निर्दिष्ट करें कि शैली परिवर्तन प्रतिशत में कब होगा, या "से" और "से" कीवर्ड के साथ, जो 0% और 100% के समान है। 0% एनीमेशन की शुरुआत है, 100% तब होता है जब एनीमेशन पूरा हो जाता है।
युक्ति: सर्वोत्तम ब्राउज़र समर्थन के लिए, आपको हमेशा 0% और 100% चयनकर्ता दोनों को परिभाषित करना चाहिए।
नोट: एनीमेशन की उपस्थिति को नियंत्रित करने के लिए एनीमेशन गुणों का उपयोग करें, और चयनकर्ताओं के लिए एनीमेशन को बाध्य करने के लिए भी।
नोट: महत्वपूर्ण नियम को कीफ़्रेम में अनदेखा कर दिया जाता है (इस पृष्ठ पर अंतिम उदाहरण देखें)।
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो नियम का पूर्ण समर्थन करता है।
-वेबकिट-, -मोज़- या -ओ- के बाद नंबर एक उपसर्ग के साथ काम करने वाले पहले संस्करण को निर्दिष्ट करें।
Property | |||||
---|---|---|---|---|---|
@keyframes | 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- |
सीएसएस सिंटेक्स
@keyframes animationname {keyframes-selector {css-styles;}}
सम्पत्ति की कीमत
Value | Description |
---|---|
animationname | Required. Defines the name of the animation. |
keyframes-selector | Required. Percentage of the animation duration. Legal values: 0-100% Note: You can have many keyframes-selectors in one animation. |
css-styles | Required. One or more legal CSS style properties |
और ज्यादा उदाहरण
उदाहरण
एक एनिमेशन में कई मुख्य-फ़्रेम चयनकर्ता जोड़ें:
@keyframes mymove
{
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
उदाहरण
एक एनिमेशन में कई CSS शैलियाँ बदलें:
@keyframes mymove
{
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
उदाहरण
कई सीएसएस शैलियों के साथ कई मुख्य-फ़्रेम चयनकर्ता:
@keyframes mymove
{
0% {top: 0px; left: 0px; background: red;}
25% {top: 0px; left: 100px; background: blue;}
50% {top: 100px; left: 100px; background: yellow;}
75% {top: 100px; left: 0px; background: green;}
100% {top: 0px; left: 0px; background: red;}
}
उदाहरण
नोट: महत्वपूर्ण नियम को कीफ़्रेम में नज़रअंदाज़ किया जाता है:
@keyframes myexample
{
from {top: 0px;}
50% {top: 100px !important;} /* ignored
*/
to {top: 200px;}
}
संबंधित पृष्ठ
सीएसएस ट्यूटोरियल: सीएसएस एनिमेशन