CSS Animation & It’s Type

5
223
CSS Animation

CSS Animation CSS की new property हैं| Animation को यूज करके आप इसमें HTML किसी भी element को animate कर सकते हैं।

CSS Animation बनाने के लिए CSS animation की कुछ प्रॉपर्टी होती है| CSS एक पॉवर फुल टेक्नोलॉजी है, जिसका यूज़ करके हम अपने पेज को एक बेहतर लुक दे सकते हैं|

CSS मतलब होता है Cascading Style Sheets. अगर हम कोई वेबसाइट बनाते हैं तो हम HTML का यूज़ करते हैं| HTML वेबसाइट के पेज को एक आकार देता है, लेकिन अगर हम उसमें से यह CSS का यूज़ करें, तो उसमें एक प्रोफेशनल लुक मिलता है वेबपेज को|

Cascading Style Sheets इसका मतलब हम अपने वेबपेज में एक नई तरह की स्टाईल या कोई attractive स्टाइल दे सकते हैं | हम web page पर अपने according कलर चेंज कर सकते हैं, उसे स्टाईल दे सकते हैं, CSS की हेल्प से|

CSS Animation

CSS Animation

CSS तीन प्रकार के होते हैं:-
1. Inline Style Sheet
2. Internal Style Sheet
3. External Style Sheet

CSS एक पॉवर फुल टेक्नोलॉजी है, जिसका यूज़ करके हम अपने पेज को एक बेहतर लुक दे सकते हैं|

1. Inline Style Sheet:- Inline Style Sheet CSS tag के अंदर ही यूज़ होते हैं| Inline Css में CSS का code same document के अंदर रहता है| जैसे आपने h1 tag लगाया हुआ है, उसके अंदर आप style attribute यूज़ करेंगे, उसके अंदर हम declaration करेंगे, Declaration दो प्रकार से डिवाइड होता है

1. Property
2. Value

Property में क्या आप चेंज कर रहे हैं ये प्रॉपर्टी के अंदर आता है|
Value आप उसकी वैल्यू क्या दे रहे हैं ये वैल्यू के अंदर आता है|

उसके बाद tag close कर देंगे ये Inline Style Sheet CSS हैं|

2. Internal Style Sheet
Internal CSS का मतलब ये होता है कि हम head tag के अंदर एक style tag लगाएंगे और उस tag के अंदर हम attribute टैग लगा दे और ये सारे css के टैग उसके अंदर define करके tag बंद कर देंगे, यह Internal CSS का यूज़ किया है|

3. External Style Sheet
External CSS ये सबसे ज्यादा यूज होने वाला फंक्शन है आज के टाइम में इसमें हम HTML की कोडिंग करते हैं 1 page पे और Css की कोडिंग नेक्स्ट पेज पे करते हैं और हम उस से लिंक करा देते हैं दोनों coding को लिंक करा देते हैं |

Advantages of CSS
1. Better Layout Controls.
2. Reduce Work
3. Faster Download.
4. Browser Support.

CSS यूज़ करके आप अपने वेबसाइट को Animate कर सकते है|

CSS Animation

CSS Animation

CSS Animation Types:-

1. Translate :- ये हम use करते है एक element को एक place से दूसरे place तक ले जाने में|
2. Rotate :- कोई भी एलिमेंट को जब हम spin करना कहते है circular motion में तो हम Rotate करेंगे|
3. Scale :- कोई भी element को हम zoom and magnify करने के लिए हम Scale का यूज़ करते है|
4. Skew :- एक एलिमेंट के corner पर कुछ transform करना चाहे तो हम Skew करेंगे|

CSS Animation बनाने के लिए CSS animation की कुछ प्रॉपर्टी होती है, Animation से related total 9 प्रॉपर्टी होती है:-

CSS Animation

CSS Animation

1. animation-name:- आप जो भी एनिमेशन बनायेंगे, इस पर एक नाम देंगे।
2. animation-duration:- इसमें हम एनिमेशन को कितनी देर तक चलाना है इसके लिए एक प्रॉपर्टी बनाई गयी है।
3. animation-timing-function:- इसमें smoothness कैसे देना है|
4. animation-delay:- उसमें एनिमेशन कितनी देर बार स्टार्ट हो?
5. animation-iteration-count:- एनिमेशन को कितनी बार चलाना है?
6. animation-direction:- इसमें अलग – अलग values हैं, जैसे रीवर्स चलाना है या कोनसी डायरेक्शन में एनीमेशन देना है?
7.animation-fill mode
8. animation-play state
9. animation:- एनिमेशन इन सब properties का short list है|

एनिमेशन के इन सारी प्रॉपर्टी को यूज करने के लिए आपको एक स्पेशल selector लेना पड़ता है CSS में, जिसका नाम है @keyframes.

यहाँ आपको @keyframes लिखना होता है और उसके बाद कोई भी एक animation name दे देंगे| जैसे
@keyframes animation-example{ }

इसमें एक बात का ध्यान देना होता है, animation name के बीच कोई space नहीं होना चाहिए|
अब CSS Animation के अंदर दो Keyword अलग से लेने पड़ते हैं, First है from {CSS Properties} Second है to {CSS Properties}मतलब एनिमेशन कहाँ से स्टार्ट हो और कहाँ पर finish हो| इसके अंदर आपको CSS की प्रॉपर्टी लिखकर Define करना होता है |

जैसे from {CSS Properties} यहां प्रॉपर्टी में हमें width डालनी है 100 और to {CSS Properties} यहां प्रॉपर्टी में हमें width डालनी है 300. तो यह CSS Animation 100 से 300 width तक होगा|
आप इस function को इस प्रकार लिख सकते है:-
@keyframes animation-example {
0%{CSS Properties}
100%{CSS Properties}
}

अब इसमें हर percentage पर अलग अलग एनीमेशन कर सकते है| As like 0% पर कोई कलर, 20% पर कोई कलर इस प्रकार हर percentage पर हम अलग अलग कलर डाल कर CSS Animation कर सकते है| अब इसे एक example पर कर के देख सकते है :-

<html>
<head>
<title>CSS Animation </title>
<style>
body {
font-family: Arial, Helvetica;
background: #eee;
}
card {
width: 300px;
height: 300px;
position: absolute;
top: 50#;
left: 50#;
line-height: 300px;
margin: 150px;
background: white;
color: #079bf2;
text-align: center;
font-size: 40px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
animation-name: sample;
animation-duration: 2s;
animation-timing-function: steps[4];
animation-delay: 2s;
animation-iteration-count: infinte;
animation-direction: alternate;
}
@keyframes sample {
0% { border-radius: 0#;}
100% { border-radius: 5#; background-color: tomato; color: white;}
}
</style>
</head>
<body>
<h1 style=”margin-bottom: 50px;”> CSS Animation </h1>
<div class=”Card>Css Animation </div>
</body>
</html>

यहाँ पर हमने एक प्रोग्राम बना रखा है जिसमे हमने एक Div लगाया है Card जिसको हमने Height and Width set की है और position भी absolute कर दिया है | इनको Top से और Left से 50% किया है और नीचे margin 150 दे दी है| ये इसलिए किया है कि ये बिलकुल सेंटर में हो जाये|

इसको line height भी दी है, ताकि जो इसके अंदर टेक्स्ट लिखा हुआ है वो vertically set हो जाये| उसके बाद हमने background color दिया है, color दिया है, text align center किया है, font size भी दिया हुआ है और Box Shadow भी लगा रखा है|

अब हमें इसमें CSS Animation का function add किया, तो इसके लिए हमें सबसे पहले selector बनाया @keyframes लिखने के बाद इसको एक name दिया है हमने| मैंने यहां sample ले लिया है, इसके अंदर दो keywords लगाये है मैंने पहले from and to. जिसे बाद में 0% and 100% पर चेंज कर दिया| अब इन keywords के अंदर प्रॉपर्टी दे दी मैँने|

अभी यह एनीमेशन तब तक नहीं चलेगा जब तक मैं Card Div को CSS Animation के sample से link न कर दूँ| तो इसके लिए मैंने Card के अंदर एक property define कर दी है, जिसका नाम animation-name किया और वहां मैंने नाम लिख दिया sample अब इस एनिमेशन को कितने देर तक चालते रहना है, उसके लिए मैंने एनिमेशन की duration define कर दी है|

अब ये एनिमेशन कितने टाइम चले, इसके लिए एक प्रॉपर्टी मैंने और ले ली है animation-iteration-count. अब animation-direction नाम की प्रॉपर्टी ली और इसके अंदर वैल्यू सेट कर दी इससे हमारा एनिमेशन to से from तक, from से to तक continue चलता रहेगा।

CSS Animation

CSS Animation

अब यहाँ CSS Animation में, animation-direction के अंदर कुछ values जाती हैं।
हम ये Properties सेट करके इसका preview देख सकते है| अब अगर हम CSS Animation प्रोग्राम का shorthand बनाना चाहते हैं, तो इस तरह है से प्रोग्राम लिखेंगे:-

animation: sample 2s infinite alternate;

हमने div tag के अंदर जो हमने अलग अलग फीचर्स लिखे थे हम सिर्फ एनिमेशन फीचर लिखकर उसके अंदर सारी प्रॉपर्टी define कर दे, तो ये हमारा shorthand कहलाता है|

आप मैंने इस फंक्शन में animation-delay define किया है, तो animation – delay क्या है? animation-delay animation-duration के बाद ही देना होता है। इसे देना से हमारी एनिमेशन उतनी देर बाद स्टार्ट होगी। अब इसमें हम animation-timing-function भी define किया है। animation-timing-function के अंदर कुछ valuesआती हैं।

Unit                Description
ease :- slow start, than fast, then end slowly
linear :- same speed from start to end
ease-in :- slow start
ease-out :- slow end
ease-in-out:- slow start and slow end
step-start :- Equivalent to steps (1, start)
step-end :- Equivalent to steps (1, end)
steps (#, start/end)
cubic-bezier :- let’s you define your own values (0 to10)

मैंने प्रोग्राम में animation timing function define किया है, जिससे हमारा प्रोग्राम फंक्शन टाइमिंग फंक्शन की वैल्यू पर चलेगा। ये वैल्यू आप सारी यूज करके उन को देख सकते हैं।

Animation fill mode animation की नेक्स्ट प्रॉपर्टी है, इसके अंदर चार values आती हैं:-
अब इसे एक example पर कर के देख सकते है :-

<html>
<head>
<title> CSS Animation </title>
<style>
body {
font-family: Arial, Helvetica;
}
box {
width: 150px;
height: 150px;
background: black;
margin-left: 20px;
animation- sample 2s 5s;
animation-fill-mode: backwards;
.box: hover {
animation-play-state: paused;
}
@keyframes sample {
0% { background: yellow; width:250px;}
50% { background: green; width:350px;}
100% { background: red; width:450px;}
}
</style>
</head>
<body>
<h1 style=”margin-bottom: 50px;”> CSS Animation </h1>
<div class=”box”>Css Animation </div>
</body>
</html>

अब मैंने इस फंक्शन function में animation fill mode define किया है| यहाँ fill mode में चार values होती हैं:-

CSS Animation

CSS Animation

1. Backward में जो delay टाइम होगा उसके अंदर ही एनिमेशन आ चूका होगा|
2. Forward में एनिमेशन वैसे ही चलेगा जैसे चलता है मगर end में वो initially state में नहीं आएगा|
3. Both में एनिमेशन backward and forward दोनों की वैल्यू लेकर चलेगा।
4. None ये default वैल्यू होती है।

अब CSS Animation की अगली वैल्यू animation play state है इसके अंदर दो values आती हैं :-
एनिमेशन की दो state होती है या तो वह चल रही होगी या रुक गई होगी| आप एनिमेशन को बिल्कुल ख़त्म नहीं कर सकते हैं Paused एनीमेशन mostly hover के लिए यूज़ होती है|

5 COMMENTS

  1. This is the perfect site for anyone who really wants to understand this topic. You realize so much its almost tough to argue with you (not that I really will need to…HaHa). You certainly put a fresh spin on a subject that’s been discussed for decades. Excellent stuff, just excellent.

LEAVE A REPLY

Please enter your comment!
Please enter your name here