CSS Se Animation Kaise Banaye? – CSS Animation Tutorial in Hindi : – अगर आपको html अच्छे से आता है तो आपके लिए css कोई बड़ी चीज़ नहीं होगी। पर आपने देखा होगा ज्यादातर Websites में Jquery की Help से Animation और Effect Use किये जाते है। पर आज हम आपको CSS से animation बनाना सिखाएंगे।
आपने बहुत सी एनीमेशन देखी होंगी जैसे की Text को Rotate होते हुए या Slide होते हुए और एक दूसरे की तरफ आते जाते हुए कभी Trun होते हुए। इन सबको Animation बोला जाता है। Animation को Use करने से Website का Look थोड़ा Attractive हो जाता है और वेबसाइट Effective लगने लगती है।
Website में Animation को Use करने के बहुत तरीके है जैसे की Photoshop Animate, 3D Animation जैसे – Maya, Max तथा After Effect आदि software में Animation को Create करके लगाया जा सकता है। Animation को Create करने के लिए बहुत सी Properties का Use किया जाता है।
CSS Animation Properties क्या है और कैसे बनाए?
CSS Animation को बनाने के लिए आपको Animation Properties का Use करना होता है। और इन Properties के साथ साथ हम html का भी Use करते है। तो चलिए जानते है की CSS Se Animation Kaise Banaye?
CSS @keyframes
@keyframes को CSS में एक Class की तरह लिखा जाता है , इसको Animation को कैसे Show करवाना है कहाँ से Start होगी Animation और कहाँ पर खतम इन सब के लिए इसका Use किया जाता है।
CSS Animation Name
Css Animation में Animation को एक नाम देने के लिए हमे Animation name का Use करना होता है जैसे की मान लीजिये एक box है जिसको हमने width, height, color के साथ animation name भी दिया हुआ है। Animation नाम को @keyframes के आगे लिखा जाता है। जैसे की आप नीचे Code में देख सकते है हमने अभी Animation Name rotate लिया है।
- HTML or CSS Se Simple Slider Kaise Banaye?, HTML & CSS Slider
- HTML Se Blinking Text Effect Kaise Banaye ? HTML Blink Tag
- React Native Kya Hai? | What is React Native In Hindi | React Native Tutorial In Hindi
- Flutter Kya Hai? | What is Flutter in Hindi | पूरी जानकारी 2021
- React JS Kya Hai? | React JS Tutorial In Hindi | React JS In Hindi
- Node JS Kya Hai? | Node JS Tutorial In Hindi | Node JS In Hindi
- React Bootstrap Kya Hai? | React Bootstrap Tutorial In Hindi
.box {
background-color: rebeccapurple;
border-radius: 10px;
width: 100px;
height: 100px;
animation-name: rotate;
animation-duration: 0.7s; }
@keyframes rotate {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); } }CSS animation duration
Duration का मतलब होता है आप कितने समय के लिए Animation को चलाना चाहते है इसके लिए Animation Duration का Use किया जाता है। जैसे की मान लीजिये आपने कोई Animation Use की है left To Right जाने की तो वो Left से Right जाने में और Right To Left जाने में कितना समय लेगा इसके लिए animation duration का Use होता है।
.box {
animation-duration: 3s;
}CSS animation delay
Delay का मतलब यहाँ पर होता है किसी भी Animation को Late करवाना जैसे की आपने किसी Box को Left To Right Rotate होने की Animation दी है तो जब वो Left to Right Rotate हो जाये तो थोड़ा वहीं पर रुके और रुकने के बाद वापस Right to Left Rotate हो , तो इसके Delay कहा जाता है। इसके लिए animation-delay का Use किया जाता है।
.box {
animation-delay: 2s;
}CSS Animation iteration count
जब भी हम css Animation का Use करते है या की भी Animation का जब Use होता है तो उसमे उसको कितनी बार Run करवाना है कितनी बार Repeat करना है , ये भी बताया जाता है। Css में इसके लिए animation-iteration-count का Use किया जाता है। इसकी Help से हम Animation को जितनी बार चाहे उतनी बार चला सकते है।
.box {
animation-iteration-count: 2;
}CSS animation direction
कोई भी Animation किसी न किसी Direction में चलती है जैसे की left से right side की तरफ, तो उसके लिए हम animation direction का Use करते है। लगातार चलाने के लिए alternative का Use किया जाता है और उल्टी तरफ चलाने के लिए reverse और लगातार उल्टी तरफ चलाने के लिए alternative-reverse का इस्तेमाल किया जाता है।
.box {
animation-direction: alternate;
}Animation timing function
Timing function के Help से हम किसी भी animation की speed को कम, ज्यादा या Starting में ज्यादा फिर कम या पहले कम बाद में ज्यादा कर सकते है इसकी बहुत सारी Property होती है जिससे हम animation की speed को Adjust कर पाते है.
.box {
animation-direction: alternate;
}CSS Transition Animation कैसे बनाए?
Transition के जरिये हम किसी भी box या image पर mouse का cursor लेके जाने पर width तथा height को बड़ा किया जा सकता है। जैसे की आपने box को 100px width और height दी है तो आप Cursor लेके जाने पर उसकी width, height 300px करके उसको बड़ा कर सकते है। इस तरह से Transition Animation लगा सकते है।
Conclusion
इस Tutorial में, हमने आपको बताया है CSS Animation कैसे बनाए। एक एक Step की Help से हमने आपको बताया है, कैसे html, CSS के साथ animation property का Use करके कैसे animation को बनाया जा सकता है। उम्मीद है यह लेख आपके लिए Helpful रहा होगा । अगर आपको मन में CSS Animation किसी भी तरह के कोई भी Question है तो आप हमें नीचे Comment कर पूछ सकते है।
