CSS @keyframes नियम
- पिछला पृष्ठ जस्टिफाइ-सेल्फ
- अगला पृष्ठ @लेयर
परिभाषा और उपयोग
@keyframes नियम के माध्यम से, आप एनिमेशन बना सकते हैं。
एनिमेशन बनाने का सिद्धांत, एक सेट शैली को धीरे-धीरे दूसरे शैली में बदलना है。
एनिमेशन प्रक्रिया के दौरान, आप बार-बार इस CSS शैली को बदल सकते हैं。
परिवर्तन होने के समय को प्रतिशत में निर्धारित करें या "from" और "to" शब्दांश के माध्यम से, जो 0% और 100% के समान हैं。
0% एनिमेशन की शुरुआत का समय है, 100% एनिमेशन के समापन का समय है。
सूचना:श्रेष्ठ ब्राउज़र समर्थन के लिए, आपको हमेशा 0% और 100% चयनकर्ता को परिभाषित करना चाहिए。
सूचना:एनिमेशन के दिखावा को नियंत्रित करने के लिए एनिमेशन प्रतियोगिता उपयोग करें और इसे चयनकर्ता से बांधें。
ध्यान दें:!important नियम कार्यक्रम में नज़रअंदाज़ कर दिया जाता है (इस पृष्ठ के अंतिम उदाहरण को देखें)。
अन्य संदर्भ:
CSS3 ट्यूटोरियल：CSS3 एनीमेशन
उदाहरण
उदाहरण 1
div एलिमेंट को एकसमान गति से नीचे की ओर घुमाएं:
@keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
उदाहरण 2
एक एनिमेशन में कई keyframe चयनकर्ता जोड़ें:
@keyframes mymove {
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
उदाहरण 3
एक एनिमेशन में कई सीएसएस शैली को बदलें:
@keyframes mymove {
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
उदाहरण 4
एकाधिक सीएसएस शैली के कई keyframe चयनकर्ता:
@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;}
}
उदाहरण 5
ध्यान दें:!important नियम केंद्रीय फ्रेम में अनदेखा कर दिया गया:
@keyframes myexample {
from {top: 0px;}
50% {top: 100px !important;} /* अनदेखा कर दिया गया */
to {top: 200px;}
}
सीएसएस व्याकरण
@keyframes animationname {keyframes-selector {css-styles;}}
गुण मान
| मान | वर्णन |
|---|---|
| animationname | आवश्यक। एनिमेशन के नाम को परिभाषित करें |
| keyframes-selector |
आवश्यक। एनिमेशन के समय की प्रतिशत वैध मान:
|
| css-styles | आवश्यक। एक या अधिक वैध सीएसएस शैली गुण |
ब्राउज़र समर्थन
| च्रोम | IE / एज | फ़ायरफॉक्स | सैफारी | ओपेरा |
|---|---|---|---|---|
| 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- |
- पिछला पृष्ठ जस्टिफाइ-सेल्फ
- अगला पृष्ठ @लेयर
