एनिमेशन प्रॉपर्टी
animation प्रॉपर्टी एनिमेशन के लिए एक शॉर्टहैंड प्रॉपर्टी है,
जो एक साथ एनिमेशन के लिए सभी गुणों को सेट करने की अनुमति देती है: animation-name,
animation-duration,
animation-delay,
animation-timing-function,
animation-iteration-count,
animation-direction,
animation-fill-mode,
animation-play-state।
मानों का क्रम मायने नहीं रखता, एनिमेशन की अवधि
animation-duration को विलंब animation-delay से
पहले अवश्य होना चाहिए। केवल animation-name और
animation-duration गुण अनिवार्य हैं।
प्रॉपर्टी none मान भी ले सकती है,
जो एनिमेशन को पूरी तरह से बंद कर देता है। यह
मान डिफ़ॉल्ट मान है।
सिंटैक्स
सिलेक्टर {
animation: मान;
}
उदाहरण
इस उदाहरण में एनिमेशन से पहले 3 सेकंड की देरी होगी
(हर नए प्लेबैक से पहले), और फिर एनिमेशन
6 सेकंड के लिए चलेगा:
<div id="elem"></div>
@keyframes move {
from {
margin-left: 0px;
}
to {
margin-left: 400px;
}
}
#elem {
animation: move 6s infinite 3s linear;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
उदाहरण . संभावित समस्याएं
संक्षिप्त रूप में लिखा गया एनिमेशन अपने नाम के कारण काम नहीं कर सकता है। आइए निम्नलिखित एनिमेशन पर विचार करें:
@keyframes reverse {
from {
left: 0;
}
to {
left: 300px;
}
}
ध्यान दें, मैं एनिमेशन का नाम reverse उपयोग कर रहा हूं।
पहली नज़र में, सब कुछ ठीक है, लेकिन एनिमेशन
काम नहीं करता, क्योंकि reverse animation-direction प्रॉपर्टी
के लिए एक वैध कीवर्ड है।
नाम में अन्य कीवर्ड का उपयोग करने पर संक्षिप्त रूप में एनिमेशन भी काम नहीं करेगा। लेकिन "पूर्ण" रूप का उपयोग करने पर सब कुछ ठीक से काम करता है।
animation-direction के कीवर्ड-मानों में,
जो एनिमेशन को तोड़ते हैं, टाइमिंग फ़ंक्शंस से संबंधित कीवर्ड,
साथ ही infinite, alternate,
running, paused आदि भी शामिल हैं।
यह भी देखें
-
@keyframesकमांड,
जो एनिमेशन की कीफ़्रेम्स को परिभाषित करती है -
transitionस्मूद ट्रांज़िशन, जो किसी एलिमेंट पर हॉवर करने पर एनिमेशन प्रस्तुत करते हैं
