अगर हम html के साथ CSS का इस्तेमाल करना सीख गए है तो आज हम सीखेंगे CSS से animation कैसे बनाए. जब हम अपने mobile या computer पर कोई text घूमते हुए , कोई image, button, box एक तरफ से दूसरी तरफ जाते हुए या उल्टी दिशा में चलते हुए दिखाई देते है जिसे हम Animation कहते है website के लिए हम Animation को CSS द्वारा बनाते है जिसे CSS Animation कहा जाता है.
हम CSS के अलावा Photoshop Animate, 3D Animation जैसे – Maya, Max तथा After Effect आदि software में Animation बनाकर अपने website में लगा सकते है Animation बनाने के लिए बहुत सारे property का इस्तेमाल किया जाता है.
Table of Contents
CSS Animation Properties क्या है और कैसे बनाए
अगर आपको सीखना है CSS animation कैसे बनाए तो आपको उसके साथ animation property का इस्तेमाल करना जरुरी है Animation बनाने के लिए हम बहुत सारे property का इस्तेमाल करते है जिसमें हम html के साथ CSS का इस्तेमाल कर करते है जिसे CSS Animation Property कहते है आइए जानते है –
1) CSS @keyframes
@keyframes को CSS में एक class की तरह लिखा गया है इससे हमे Animation कैसा दिखाई देगा कहा शुरू और कहा खत्म होगा पुराने से नए चीज़ में कैसे बदलेगा आदि चीज़ों के लिए इस्तेमाल करते है.
2) CSS Animation Name
अगर हमें CSS में animation को नाम देना है उसके लिए हम animation name का इस्तेमाल करते है मान लीजिए एक box है जिसमें हमें width, height, color के साथ animation name भी देते है. @keyframes के आगे हम animation-name को लिखते है जैसे नीचे हमने animation का नाम slide रखा हुआ है.
3) CSS Animation duration
Duration का मतलब कितने समय समय तक इसका इस्तेमाल आप अपने animation को कितने second या समय तक चलाना चाहते है उसके लिए animation duration का इस्तेमाल करते है. एक box है जिसका color red है mouse cursor को box पर ले जाने पर हम चाहते है box का color green हो जाए इसके लिए हम from और to का इस्तेमाल करते है from का मतलब कहाँ से animation शुरू होगा तथा to का मतलब कहाँ पर खत्म होगा.
4) CSS Animation delay
Delay का मतलब होता है late होना इसका इस्तेमाल किसी animation को late कराने के लिए करते है एक box है जिसमें हमने animation-duration 3s दिया है अगर हम CSS animation को 3s बाद शुरू कराना चाहते है उसके लिए हम animation-delay का इस्तेमाल करते है.
5) CSS Animation iteration count
जो भी हम CSS में animation बनाते है उसे हम लगातार कितनी बार चलाना चाहते है या लगातार चलाना चाहते है उसके लिए animation-iteration-count का इस्तेमाल करते है जैसे 2 बार चलाना है तो हम 2 लिखेंगे अगर लगातार चलाना चाहते है तो infinite का इस्तेमाल करते है.
6) CSS animation direction
किसी animation को अगर हम left से right side की तरफ, उल्टी दिशा में या किसी भी दिशा में चलाना चाहते है तो उसके लिए हम animation direction का इस्तेमाल करते है एक box है जिसे हमने बाए तरफ box का color 0% पर red रखा है और दाए तरफ box का color 500% पर green रखा है और हम बाए से दाए की तरफ चलाना चाहते है तो हम animation-direction normal देंगे.
लगातार चलाने के लिए alternative का इस्तेमाल करते है उल्टी तरफ चलाने के लिए reverse और लगातार उल्टी तरफ चलाने के लिए alternative-reverse का इस्तेमाल करते है.
7) Animation timing function
Timing function के द्वारा हम किसी भी animation की speed कम, ज्यादा तथा शुरुवात में ज्यादा फिर कम या पहले कम बाद में ज्यादा कर सकते है इसकी बहुत सारी Property है जिससे हम animation की speed को manage कर सकते है.
- Ease :- इसका इस्तेमाल करने से शुरुवात में animation धीरे फिर तेज़ तथा last में धीरे चलता है.
- Linear :- linear से animation शुरुवात से अंतिम तक एक ही speed में चलता है.
- Ease-in :- इससे animation शुरुवात में धीरे तथा उसके बाद तेज चलता है.
- Ease-out :- ease-out शुरुवात में तेज़ तथा अंतिम समय में धीरे चलता है.
- Ease-in-out :- इससे animation शुरुवात से अंतिम तक धीरे चलता है.
8) CSS transition animation कैसे बनाए
Transition के द्वारा हम किसी box पर mouse का cursor ले जाने पर उसकी width तथा height बड़ा सकते है या कम कर सकते है. एक box है जिसकी width तथा height 100px है हम box पर transition class के साथ समय second के हिसाब से लगा सकते है cursor ले जाने के बाद width, height 300px हो जाएगी जिसमे हम width को जल्दी और height को आराम से भी चला सकते है.
9) Animation width 0 to 100% कैसे बनाए
किसी box पर mouse का cursor ले जाए और box की width ०% से १००% हो जाए इसके लिए हम CSS में hover का इस्तेमाल करते है box में width, height तथा color देने के बाद उसमें hover में transition देंगे इसी तरह हम CSS Animation opacity 0 to 100% कर सकते हैऔर अधिक जानकरी के लिए आप w3 website से भी पढ़ सकते है
2D और 3D Animation में क्या अंतर है कैसे बनाए
2D का मतलब होता है two-dimensional जब किसी image, box या किसी भी चीज़ को हम देखते है जिसमें हमें उसकी width और height दिखाई देती है तथा हमें उसकी ऊंचाई गहराई नहीं दिखाई देती है जिसका इस्तेमाल animation बनाने के लिए किया जाता है जिसे 2d animation कहते है.
3D का मतलब होता है three-dimensional जब किसी image, box में हमें width, height के साथ-साथ ऊंचाई गहराई भी दिखाई देती है जिसमें हमें उभरा हुआ दिखाई देता है है जिसे हम 3d animation कहते है.
2d animation बनाने के लिए आप Photoshop Illustrator जैसे software और 3d animation बनाने के लिए maya, max, after effect जैसे software का इस्तेमाल किया जाता है.
मैने पूरी तरीके से बताने की कोशिश की है कि CSS Animation कैसे बनाए, कैसे हम html, CSS के साथ animation property का इस्तेमाल कर कैसे animation का निर्माण कर सकते है और 2d और 3d animation के बारे में बताया गया है अगर आपको इससे संबंधित कोई सवाल है आप पूछ हमसे सकते है.
