Creating Animations & Keyframes(CSS)Free web Tutorials #36
Creating Animations & Keyframes
इस ट्यूटोरियल में, हम सीएसएस की मदद से विभिन्न एनिमेशन बनाने के तरीके के बारे में जानेंगे। CSS के साथ एनिमेशन बनाना पूरे वेब डेवलपमेंट का सबसे रोमांचक हिस्सा है। हम tut36.html के रूप में एक नई फ़ाइल बनाएंगे और मूल HTML टेम्पलेट के लिए बॉयलरप्लेट जोड़ेंगे। फिर <शीर्षक> टैग में शीर्षक को कीफ्रेम और एनिमेशन के रूप में दें।
एनिमेशन के बारे में इस ट्यूटोरियल में साझा की गई तकनीकों की आप निश्चित रूप से सराहना करेंगे। आइए अब अपनी वेबसाइट के लिए HTML कोड इस प्रकार लिखें-
<body>
<div class="container">
<div class="box">
This is a box
</div>
</div>
</body>
आइए अब कुछ CSS जोड़कर अपने कंटेनर और बॉक्स को स्टाइल करें-
.container {
background-color: greenyellow;
}
.box {
background-color: green;
width: 250px;
height: 250px;
position: relative;
}
आउटपुट इस प्रकार होगा-
बॉक्स की स्थिति सापेक्ष होने के लिए सेट की गई है ताकि हम इसे अपने वेबपेज में स्थानांतरित कर सकें।
हमारे एनिमेशन बनाने के लिए, हमें एनिमेशन-नाम देकर शुरुआत करनी होगी। हम यहां कोई भी नाम दे सकते हैं। इसका उपयोग सिर्फ हमारे एनीमेशन को परिभाषित करने के लिए किया जाता है। एनीमेशन डिजाइन करने के लिए कोड इस प्रकार है-
.box {
background-color: green;
width: 250px;
height: 250px;
position: relative;
/* animation-name: code1; */
animation-name: code2;
animation-duration: 8s;
animation-iteration-count: 1;
}
उपरोक्त उदाहरण में, हम एनीमेशन-नाम का उपयोग code1 के रूप में कर रहे हैं। उपयोग की जाने वाली अगली संपत्ति एनीमेशन-अवधि है। इसका उपयोग यह तय करने के लिए किया जाता है कि हमारा एनीमेशन कितने समय तक चलेगा। अंतिम संपत्ति एनीमेशन-पुनरावृत्ति-गिनती है। इसका उपयोग यह तय करने के लिए किया जाता है कि एनीमेशन कितनी बार चलेगा।
अब हम अपने द्वारा बनाए गए एनिमेशन यानी code1 को इस प्रकार परिभाषित करेंगे-
@keyframes code1 {
from {
width: 200px;
}
to {
width: 1400px;
}
}
एनिमेशन बनाने के लिए कीफ्रेम का इस्तेमाल किया जाता है। से और का उपयोग यह तय करने के लिए किया जाता है कि वेबपेज में एनीमेशन कैसे चलेगा। उपरोक्त उदाहरण में, हम एनीमेशन हैरी 1 को 200px से 1400px तक ले जा रहे हैं। इस प्रकार के एनिमेशन का उपयोग वेबपेज पर स्क्रॉल बार या प्रोग्रेस बार को डिजाइन करने के लिए किया जाता है।
एनिमेशन को अनुकूलित करने के लिए कुछ अन्य गुण भी हैं जैसे-
एनिमेशन-भरने-मोड:
यदि हम एनीमेशन पर लागू होने वाली अंतिम संपत्ति को रखना चाहते हैं तो हम एनीमेशन-फिल-प्रॉपर्टी को निम्नानुसार आगे सेट कर सकते हैं-
animation-fill-mode: forward;
एनिमेशन-टाइमिंग-फ़ंक्शन:
हम इस संपत्ति को तीन अलग-अलग मूल्यों के साथ परिभाषित कर सकते हैं-
आराम से
इसे लगाने के बाद एनिमेशन धीरे-धीरे शुरू हो जाएगा और अंत की ओर तेज हो जाएगा।
आराम करो
इसे लगाने के बाद एनिमेशन तेजी से शुरू होगा और अंत तक धीमा हो जाएगा।
आराम से बाहर
इसे लगाने के बाद एनिमेशन धीरे-धीरे शुरू होगा, फिर बीच में ही तेज हो जाएगा और धीरे-धीरे खत्म हो जाएगा।
एनिमेशन-देरी
इसका उपयोग उस समय को परिभाषित करने के लिए किया जाता है जिसके बाद एनीमेशन शुरू होगा।
animation-delay: 3s;
एनिमेशन-दिशा:
इस संपत्ति का उपयोग एनीमेशन की दिशा को परिभाषित करने के लिए किया जाता है। उदाहरण के लिए, यदि हम इसे रिवर्स के रूप में चुनते हैं, तो यह एनीमेशन को विपरीत दिशा में ले जाएगा।
animation-direction: reverse;
कीफ़्रेम के अलावा एनिमेशन बनाने का एक और तरीका है। इसके लिए हम code2 नाम देंगे।
@keyframes code2 {
0%{
top:0px;
left:0px;
}
25%{
top: 250px;
left: 0px;
}
75%{
top: 250px;
left: 250px;
}
100%{
top: 0px;
left: 250px;
}
}
इस तरह, हम विभिन्न प्रतिशत के संदर्भ में एनिमेशन बना सकते हैं। हम यहां अलग-अलग मान निर्दिष्ट कर सकते हैं जो तब होगा जब एनीमेशन का वह प्रतिशत पूरा हो जाएगा।
इन एनिमेशनों का अभ्यास करते रहें और आने वाले ट्यूटोरियल्स में आप इन एनिमेशनों के व्यावहारिक कार्यान्वयन के बारे में जानेंगे।
Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Keyframes and Animations</title>
</head>
<style>
.container {
background-color: greenyellow;
}
.box {
background-color: green;
width: 250px;
height: 250px;
position: relative;
/* animation-name: code1; */
animation-name: code2;
animation-duration: 8s;
animation-iteration-count: 1;
/* animation-fill-mode: alternate; */
/* animation-timing-function: ease-in-out; */
/* animation-delay: 3s; */
/* animation-direction: reverse; */
/* These properties can be set using this shorthand */
/* animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-fill-mode; */
/* animation: harry 5s ease-in 1s 12 backwards; */
}
@keyframes code2 {
0%{
top:0px;
left:0px;
}
25%{
top: 250px;
left: 0px;
}
75%{
top: 250px;
left: 250px;
}
100%{
top: 0px;
left: 250px;
}
}
@keyframes code1 {
from {
width: 200px;
}
to {
width: 1400px;
}
}
</style>
<body>
<div class="container">
<div class="box">
This is a box
</div>
</div>
</body>
</html>
Free web Tutorials #36){kind=link}