CSS से एनीमेशन कैसे बनायें? CSS Animation Tutorial in Hindi

जैसा की आप जानते हैं की animation हर किसी के लिए interesting और मजेदार होता है ऐसे में यदि आप इसका  उपयोग अपनी website पर करते हैं तो  इससे आपकी वेबसाइट आपके audience के लिए और भी interesting हो सकती है।

लेकिन website के लिए animation कैसे बनायें? यह सवाल आपके मन में आ रहा होगा, तो चलिए आज आपको  इस article में बताते हैं की कैसे आप बड़ी आसानी से सिर्फ CSS में कोड लिखकर animation बना सकते हैं।

इससे पहले हमने CSS3 transition effects के बारे में आपको बताया था जिनका उपयोग करके भी simple CSS animations डिजाईन किया जा सकता है।

आज हम कुछ CSS के कुछ advanced technique सीखने जा रहे हैं जिनकी मदद से आप बहुत ही आसानी से छोटे-छोटे कोड लिखकर मजेदार और बेहतरीन एनीमेशन बना सकते हैं।

CSS Animation Tutorial in Hindi

CSS में animation create करने से पहले आपको दो properties के बारे में जरूर पता होना चाहिए :

• Keyframes : animation  कैसे दिखाई देगा उसमे कितने stages होंगे और उनके styles कैसे होंगे ये keyframe से  define किया जाता है।
• Animation property : @keyframes बनाने के बाद उसे किसी element पर apply करने के लिए animation property का use किया जाता है।

चलिए अब इन दोनों को विस्तार से समझने की कोशिश करते हैं :

CSS Keyframes

इसके द्वारा हम animation के stages को set करते हैं। प्रत्येक @keyframes तीन चीजों से मिलकर बना होता है जो कुछ इस प्रकार हैं:

1. Animation name: animation का नाम।
2. Animation stages: हर एक stage को percentage से define किया जाता है।जहाँ 0% का मतलब beginning stage और 100% का मतलब ending state होता है। इन दोनों के बीच multiple stages define किये जा सकते हैं।
3. CSS properties: CSS styles, जिसे हर stage के लिए define किया जा सकता है।

Example:

@keyframes scaleme {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  60% {
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

आप ऊपर example में देख सकते हैं हमने एक keyframes बनाया जिसका नाम scaleme रखा और उसके अंदर तीन stages define किये।

पहले stage में element की size transform property से scale करके छोटा  रखा जाएगा फिर इसे दुसरे stage जो की 60% से start होगा उसमे size  थोडा increase किया जायेगा और finally last stage में element अपने original size में display होगा।

CSS3 Animation Properties

@keyframes define करने के बाद एनीमेशन को properly work कराने के लिए CSS animation properties का use करना आवश्यक है।

Animation properties से @keyframes को किसी selector (या element) के लिए call किया जाता है।

एनीमेशन में multiple properties हो सकते हैं जिनमे से नीचे दिए गये दो properties का use करना जरूरी है:

• animation-name: एनीमेशन का नाम, जिसे @keyframes में define किया गया हो
• animation-duration: एनीमेशन का duration, seconds (जैसे 5s) या milliseconds (जैसे 100ms) में specify करने के लिए

Example:

div{
animation-duration: 2s;
animation-name: scaleme;
}

या shorthand syntax का उपयोग कर सकते हैं :

div{
animation: scaleme 2s;
}

इस example में हमने पहले बनाये गये keyframes को call करके div element को animate किया है जिसका duration 2 seconds set किया है।

Output

जैसा की हमने बताया animation-name और animation-duration ये दोनों properties सबसे  जरूरी हैं लेकिन इन दोनों के अलावा एनीमेशन के लिए और भी कई सारे additional properties हैं जिनका उयोग करके advanced और complex animations design किये जा सकते हैं।

ये सारे properties नीचे दिए गये हैं:

• animation-iteration-count
• animation-timing-function
• animation-delay
• animation-direction
• animation-fill-mode
• animation-play-state

अब चलिए एक-एक करके इनको समझते हैं और इनके examples देखते हैं:

animation-iteration-count

एनीमेशन कितने बार run होगा यह तय किया जाता है animation-iteration-count property से।

इसकी default value 1 होती है यदि एनीमेशन को लगातार बिना रुके चलाना हो तो उसके लिए value को infinite रखनी होगी।

Synatx:

animation-iteration-count: 5;

नीचे example दिया गया है जिसमे एनीमेशन 5 बार run होगा।

animation-timing-function:

Animation की speed curve define करने के लिए animation-timing-function property का use किया जाता है।
इस property की values कुछ इस प्रकार हो सकती है:

• ease: इससे एनीमेशन की speed starting और ending में slow होती है जबकि बीच में fast होती है। यह default value है।
• linear: इससे animation speed starting से ending तक same होती है।
• ease-in: एनीमेशन starting में slow होता है
• ease-out: एनीमेशन की speed ending में slow हो जाती है
• ease-in-out: slow start और slow ending के लिए use होता है
• cubic-bezier(n,n,n,n): खुद से कोई custom timing create करने के लिए इसका उपयोग होगा

Syntax:

animation-timing-function: ease-in;

Example:

Animation-Delay

एनीमेशन कब start होगा यह control करने के लिए animation-delay property का उपयोग किया जाता है।

इसकी value second या millisecond में specify किया जाता है। यदि value 2s है तो इसका मतलब है की एनीमेशन 2 seconds के बाद शुरू होगा।

Synatx:

animation-delay:3s;

Example:

animation-direction

यहाँ पर direction का मतलब है forward और reverse. animation reverse direction में run होगा, forward में होगा या alternate cycle में run होगा यह specify किया जाता है animation-direction property से।

इस property के कुछ values इस प्रकार हो सकते हैं:

• normal (default): animation forward direction (0% से 100%) में play होगा
• reverse: reverse direction (100% से 0%) में play करने के लिए
• alternate: हर odd cycle (1, 3, 5,…) में forward direction और even cycle (2, 4, 6, …) में reverse direction में run करने के लिए।

alternate-reverse: यह alternate का just उल्टा होता है। हर odd cycle में reverse और even cycle में forward direction में play होता है।

Syntax:

animation-direction: reverse;

Example:

animation-fill-mode:

जब animation running state में नही होता (जब एनीमेशन end हो चुका हो या उसमे कोई delay हो) तब उस element का style कैसा होगा इसे specify करने के लिए animation-fill-mode property का उपयोग होता है।

इसके values कुछ इस प्रकार हो सकते हैं:

• forwards: जब एनीमेशन finish हो जाता है तब target  element में वह style set हो जाता है जिसे हम final keyframe (100%) में define करते हैं।
• backwards: एनीमेशनstart होने से पहले, target element पर first keyframe (0%) में define किये गया style apply हो जाता है।
• both:  element पर forwards और backwards दोनों rules apply हो जाते है।
• none: यह default value है, by default animation शुरू होने और समाप्त होने पर target element पर कोई style apply नही होता।

Syntax:

animation-fill-mode: forwards;

Example:

animation-play-state

animation-play-state property से यह specify किया जाता है की एनीमेशन play हो रहा है या paused है।

इसके values कुछ इस प्रकार हो सकते हैं:

• playing: एनीमेशन अभी run हो रहा है
• paused: एनीमेशन अभी paused है

Syntax:

animation-play-state: paused;

Example:

आपको यह CSS Animation Tutorial कैसा लगा हमें जरुर बताएं।

आगे पढ़ें: 

• CSS3 से अपने Website के लिए Shapes कैसे Design करें?
• Common HTML CSS Mistakes जिनसे बचना चाहिए
• HTML और CSS से Simple Menu Design कैसे बनायें

आज आपने इस article से basic CSS animations design करना सीख लिया है।यदि आप CSS animation के बारे में कुछ सवाल पूछना चाहते हैं तो आप नीचे comment box का उपयोग कर अपना सवाल पूछ सकते हैं।