ऐनिमेशन, इंटरैक्टिव एलिमेंट को हाइलाइट करने और दिलचस्पी बढ़ाने का बेहतरीन तरीका है आपके डिज़ाइन में आनंद आएगा. इस मॉड्यूल में, जोड़ने और कंट्रोल करने का तरीका जानें सीएसएस के साथ ऐनिमेशन इफ़ेक्ट.
कभी-कभी आपको इंटरफ़ेस पर ऐसे छोटे सहायक दिखते हैं जो आपकी उस सेक्शन की जानकारी जिसमें वे लोग हैं. इनमें अक्सर एक यह बताने के लिए कि जानकारी मौजूद है और के साथ इंटरैक्ट किया जाना चाहिए. यह मॉड्यूल आपको दिखाता है कि ब्राउज़र सीएसएस.
कीफ़्रेम के साथ ऐनिमेशन का क्रम सेट करने के लिए सीएसएस का इस्तेमाल किया जा सकता है. ये क्रम ये बुनियादी, एक राज्य के ऐनिमेशन या जटिल, समय पर आधारित क्रम हो सकते हैं.
कीफ़्रेम क्या है?
ज़्यादातर ऐनिमेशन टूल में, कीफ़्रेम वह तकनीक है जिसका इस्तेमाल आप ऐनिमेशन असाइन करने के लिए करते हैं राज्यों के बारे में और जानें.
उदाहरण के लिए, यहां पल्सिंग "हेल्पर" की टाइमलाइन दी गई है डॉट. ऐनिमेशन चल रहा है 1 सेकंड के लिए और 2 राज्यों के लिए है.
इनमें से हर ऐनिमेशन की स्थिति एक खास पॉइंट से शुरू और खत्म होती है. आप इन्हें कीफ़्रेम की मदद से टाइमलाइन पर मैप करते हैं.
@keyframes
ब्राउज़र सहायता
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
सीएसएस @keyframes
ऐनिमेशन के मुख्य-फ़्रेम जैसे कॉन्सेप्ट पर आधारित होते हैं.
यहां दो स्थितियों का एक उदाहरण दिया गया है:
@keyframes my-animation {
from {
transform: translateY(20px);
}
to {
transform: translateY(0px);
}
}
पहला ज़रूरी हिस्सा है,
कस्टम आइडेंटिफ़ायर (custom-ident
),
का नाम लिखें. इस उदाहरण में आइडेंटिफ़ायर my-animation
है.
कस्टम आइडेंटिफ़ायर एक फ़ंक्शन नाम की तरह काम करता है,
की मदद से आप कीफ़्रेम नियम का संदर्भ अपने सीएसएस कोड में कहीं और लगा सकते हैं.
मुख्य-फ़्रेम नियम के अंदर, from
और to
ऐसे कीवर्ड हैं जो 0%
और
100%
, जो ऐनिमेशन की शुरुआत और आखिर में होते हैं.
आप उसी नियम को इस तरह से दोबारा बना सकते हैं:
@keyframes my-animation {
0% {
transform: translateY(20px);
}
100% {
transform: translateY(0px);
}
}
समयसीमा के साथ, जितने चाहें उतने पोज़िशन जोड़े जा सकते हैं. पल्सिंग हेल्पर उदाहरण में, ऐसे दो स्टेटस हैं जिनका मतलब दो होता है मुख्य-फ़्रेम सेट करने होंगे. इसका मतलब है कि आपके मुख्य-फ़्रेम नियम के अंदर आपकी दो पोज़ीशन तय होती है इनमें से हर मुख्य-फ़्रेम में हुए बदलावों को दिखाते हैं.
@keyframes pulse {
0% {
opacity: 0;
}
50% {
transform: scale(1.4);
opacity: 0.4;
}
}
animation
प्रॉपर्टी
ब्राउज़र सहायता
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
सीएसएस नियम में अपने @keyframes
का इस्तेमाल करने के लिए, आप या तो कई तरह के ऐनिमेशन तय कर सकते हैं
अलग-अलग प्रॉपर्टी का इस्तेमाल करें या animation
का इस्तेमाल करें
शॉर्टहैंड प्रॉपर्टी.
animation-duration
ब्राउज़र सहायता
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
.my-element {
animation-duration: 10s;
}
animation-duration
प्रॉपर्टी तय करती है कि @keyframes
टाइमलाइन कितनी लंबी समय की वैल्यू के तौर पर होनी चाहिए.
डिफ़ॉल्ट रूप से यह 0 सेकंड पर सेट हो जाता है, जिसका मतलब है कि ऐनिमेशन अब भी चलता रहेगा, लेकिन
जिसे आसानी से देखा जा सकता है. नेगेटिव समय की वैल्यू का इस्तेमाल नहीं किया जा सकता.
animation-timing-function
ब्राउज़र सहायता
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
ऐनिमेशन में नैचुरल मोशन फिर से बनाने के लिए, टाइमिंग फ़ंक्शन का इस्तेमाल किया जा सकता है
हर बिंदु पर एनिमेशन की गति की गणना करें. कैलकुलेटेड वैल्यू अक्सर
घुमावदार होता है, जिसकी वजह से ऐनिमेशन 30 मिनट में अलग-अलग स्पीड पर चलता है
animation-duration
पर क्लिक कर सकते हैं और अगर ब्राउज़र
@keyframes
में तय किए गए मान से परे किसी मान की गणना करता है.
सीएसएस में प्रीसेट के तौर पर ऐसे कई कीवर्ड उपलब्ध हैं जिनका इस्तेमाल वैल्यू के तौर पर किया जाता है
animation-timing-function:
linear
, ease
, ease-in
, ease-out
, ease-in-out
.
.my-element {
animation-timing-function: ease-in-out;
}
ईज़िंग फ़ंक्शन की वैल्यू कर्व की तरह दिखती हैं, क्योंकि ईज़िंग का हिसाब लगाने के लिए
बेज़ियर कर्व, एक तरह का फ़ंक्शन है जिसका इस्तेमाल रफ़्तार का अनुमान लगाने के लिए किया जाता है. हर समय
फ़ंक्शन कीवर्ड, जैसे कि ease
, पहले से तय बेज़ियर कर्व का संदर्भ देता है. सीएसएस में,
आप cubic-bezier()
फ़ंक्शन का इस्तेमाल करके सीधे बेज़ियर कर्व को परिभाषित कर सकते हैं,
यह चार संख्या मान स्वीकार करता है: x1
, y1
, x2
, y2
.
.my-element {
animation-timing-function: cubic-bezier(.42, 0, .58, 1);
}
ये वैल्यू, कर्व के हर हिस्से को X और Y ऐक्सिस पर प्लॉट करती हैं.
बेज़ियर कर्व को समझना जटिल है. विज़ुअल टूल, जैसे कि जनरेटर से बहुत मदद मिलती है.
steps
इज़िंग फ़ंक्शन
कभी-कभी हो सकता है कि आप अपने ऐनिमेशन पर ज़्यादा बारीकी से कंट्रोल करना चाहें
जो कर्व के बजाय अंतरालों पर चलते हैं. steps()
ईज़िंग फ़ंक्शन की मदद से
तो टाइमलाइन को बराबर के इंटरवल में बांटा जाता है.
.my-element {
animation-timing-function: steps(10, end);
}
पहला तर्क संख्या के चरण हैं. अगर उपयोगकर्ताओं की संख्या बराबर हो कीफ़्रेम चरण के रूप में बनाए जाते हैं, तो हर कीफ़्रेम यह एक चरण है, जिसमें राज्यों के बीच कोई ट्रांज़िशन नहीं होता. अगर चरणों की तुलना में कम कीफ़्रेम हैं, तो ब्राउज़र बीच में चरण जोड़ देता है दूसरे तर्क के आधार पर कीफ़्रेम सेट करें.
दूसरा तर्क, दिशा निर्देश है. अगर इसे end
पर सेट किया जाता है, जो
डिफ़ॉल्ट रूप से, आपकी टाइमलाइन के अंत में चरण पूरे हो जाते हैं. अगर इसे start
पर सेट किया जाता है, तो
आपके ऐनिमेशन का पहला चरण शुरू होते ही पूरा हो जाता है, जिसका मतलब है कि
end
से एक चरण पहले खत्म होता है.
animation-iteration-count
ब्राउज़र सहायता
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
.my-element {
animation-iteration-count: 10;
}
ऐनिमेशन-इटरेशन-काउंट
प्रॉपर्टी तय करती है कि@keyframes
ऐनिमेशन. डिफ़ॉल्ट रूप से, यह 1 होता है, जिसका मतलब है कि ऐनिमेशन बंद हो जाता है
वह आपकी टाइमलाइन के अंत तक पहुंचता है. यह वैल्यू, नेगेटिव नंबर नहीं हो सकती.
अपने ऐनिमेशन को लूप में चलाने के लिए, इटरेशन की संख्या को infinite
पर सेट करें. इस तरह
इस लेसन की शुरुआत का पल्सिंग ऐनिमेशन काम करता है.
animation-direction
ब्राउज़र सहायता
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
.my-element {
animation-direction: reverse;
}
साथ ही, यह सेट किया जा सकता है कि टाइमलाइन आपके कीफ़्रेम पर किस दिशा में चले animation-direction, जो इन वैल्यू को लेता है:
normal
: डिफ़ॉल्ट वैल्यू, जो फ़ॉरवर्ड होती है.reverse
: आपकी टाइमलाइन के पीछे की ओर चलता है.alternate
: हर ऐनिमेशन के लिए, अलग-अलग समयावधि के बीच टाइमलाइन बदलती है तेज़ी से दौड़ना.alternate-reverse
:alternate
की तरह, लेकिन ऐनिमेशन इससे शुरू होता है: समयावधि पीछे की ओर चल रही है.
animation-delay
ब्राउज़र सहायता
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
.my-element {
animation-delay: 5s;
}
ऐनिमेशन-डिले
प्रॉपर्टी तय करती है कि ऐनिमेशन शुरू होने से पहले ब्राउज़र कितनी देर इंतज़ार करता है.
animation-duration
प्रॉपर्टी की तरह, इसमें भी समय लगेगा.
animation-duration
के उलट, आपके पास animation-delay
को नेगेटिव के तौर पर तय करने का विकल्प है
मान, जिससे एनिमेशन आपके
समयावधि. उदाहरण के लिए, अगर आपका ऐनिमेशन 10 सेकंड लंबा है और आपने
animation-delay
से -5s
तक, ऐनिमेशन आपके
समयावधि.
animation-play-state
ब्राउज़र सहायता
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
.my-element:hover {
animation-play-state: paused;
}
ऐनिमेशन-प्ले-स्टेट
प्रॉपर्टी से आपको ऐनिमेशन चलाने और रोकने की सुविधा मिलती है.
डिफ़ॉल्ट वैल्यू running
है. इसे paused
पर सेट करने पर, ऐनिमेशन रुक जाता है.
animation-fill-mode
ब्राउज़र सहायता
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
animation-fill-mode
प्रॉपर्टी तय करती है कि आपकी @keyframes
टाइमलाइन में कौन-से मान
ऐनिमेशन शुरू या खत्म होने के बाद होता है. डिफ़ॉल्ट वैल्यू none
है, जिसका मतलब है कि
ऐनिमेशन पूरा होने पर, आपकी टाइमलाइन में मौजूद वैल्यू खारिज कर दी जाती हैं.
दूसरे विकल्पों में ये शामिल हैं:
forwards
: ऐनिमेशन की दिशा के आधार पर, आखिरी कीफ़्रेम बना रहता है.backwards
: ऐनिमेशन की दिशा के आधार पर, पहला कीफ़्रेम बना रहता है.both
: पहला और आखिरी, दोनों कीफ़्रेम बने रहते हैं.
animation
शॉर्टहैंड
हर प्रॉपर्टी को अलग-अलग परिभाषित करने के बजाय, इन्हें
animation
शॉर्टहैंड की मदद से,
निम्न क्रम:
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state
.my-element {
animation: my-animation 10s ease-in-out 1s infinite forwards forwards running;
}
ऐनिमेशन का इस्तेमाल करते समय इन बातों का ध्यान रखें
उपयोगकर्ता अपने ऑपरेटिंग सिस्टम को कम की गई मोशन सुविधा को प्राथमिकता दें पर सेट कर सकते हैं ऐप्लिकेशन और वेबसाइटों के साथ इंटरैक्ट करते समय. आपके पास इस सेटिंग का पता लगाने का विकल्प है prefers-reduced-motion का इस्तेमाल करके मीडिया क्वेरी:
@media (prefers-reduced-motion) {
.my-autoplaying-animation {
animation-play-state: paused;
}
}
यह ज़रूरी नहीं है कि कोई ऐनिमेशन न चुना जाए. यह विकल्प कम चुना गया है ऐनिमेशन, खास तौर पर कम अनचाहा ऐनिमेशन. इसके बारे में ज़्यादा जानने के लिए, इस प्राथमिकता और कुल परफ़ॉर्मेंस को, ऐनिमेशन गाइड देखें.
देखें कि आपको कितना समझ आया है
ऐनिमेशन के बारे में अपनी जानकारी परखें
क्या @keyframes
ऐनिमेशन का नाम या कस्टम आइडेंटिफ़ायर केस-सेंसिटिव (बड़े और छोटे अक्षरों में अंतर) है?
from
और to
कीवर्ड इसके समान हैं:
start
और end
.0
और 1
0%
और 100%
.animation-timing-function
को आम तौर पर इस नाम से भी जाना जाता है:
किसी @keyframes
ऐनिमेशन में कम से कम कितने कीफ़्रेम ज़रूरी होने चाहिए?