Animation in CSS in Hindi

0
37
Animation in CSS

Animation in CSS

Animation in CSS, CSS एक ऐसी भाषा है जो HTML डॉक्यूमेंट की शैली का वर्णन करती है। CSS बताता है कि HTML तत्वों को कैसे प्रदर्शित किया जाना चाहिए।

Animation in CSS: What is CSS?

CSS Cascading Style Sheets के लिए है| CSS बताता है कि HTML तत्वों को स्क्रीन, पेपर या अन्य मीडिया में कैसे प्रदर्शित किया जाना है|CSS बहुत काम बचाता है। यह एक साथ कई वेब पेजों के लेआउट को नियंत्रित कर सकता है|CSS फ़ाइलों में External style sheets collect हैं|

Animation in CSS एक CSS style configuration से दूसरे में बदलाव को संभव बनाता है। एनिमेशन में दो घटक होते हैं, CSS एनीमेशन का वर्णन करने वाली एक शैली और कीफ़्रेम का एक सेट जो एनीमेशन की शैली की शुरुआत और अंत की स्थिति को indicate करता है, साथ ही संभव मध्यवर्ती तरीके भी। चलती वस्तुओं पर ध्यान देने के लिए मानव मस्तिष्क कठोर होता है।

Animation in CSS

Animation in CSS

Movement को नोटिस करने के लिए इस प्राकृतिक रिफ्लेक्स के कारण, आपकी वेबसाइट या ऐप में एनीमेशन जोड़ना आपके उत्पाद के महत्वपूर्ण क्षेत्रों पर उपयोगकर्ताओं का ध्यान आकर्षित करने और आपके इंटरफ़ेस में रुचि जोड़ने का एक शक्तिशाली तरीका है। Animation जब अच्छी तरह से किया जाता है, तो एनिमेशन मूल्यवान इंटरैक्शन और प्रतिक्रिया जोड़ सकते हैं, साथ ही साथ भावनात्मक अनुभव को बढ़ा सकते हैं, आनंद ला सकते हैं, और अपने इंटरफेस में व्यक्तित्व जोड़ सकते हैं। वास्तव में, animation का मतलब जीवन में लाना है।

Animation in CSS दो मूल Building Blocks से बने हैं।

1. Keyframes – एनीमेशन के चरणों और शैलियों को परिभाषित करते हैं।
2. Animation Properties – एक विशिष्ट CSS तत्व के लिए @keyframes असाइन करें और परिभाषित करें कि यह कैसे एनिमेटेड है।

Animation in CSS: 1. Keyframes

Keyframes CSS Animation की नींव हैं। वे परिभाषित करते हैं कि एनीमेशन टाइमलाइन के प्रत्येक चरण में एनीमेशन कैसा दिखता है। प्रत्येक @keyframes से बना है

1. Name of the animation : एक नाम जो एनीमेशन का वर्णन करता है, उदाहरण के लिए, Bounce.

2. Stages of the animation: एनीमेशन के प्रत्येक चरण को प्रतिशत के रूप में दर्शाया गया है। 0% एनीमेशन की शुरुआत की स्थिति का प्रतिनिधित्व करता है। 100% एनीमेशन की समाप्ति स्थिति का प्रतिनिधित्व करता है। कई मध्यवर्ती राज्यों को बीच में जोड़ा जा सकता है।

3. CSS Properties: एनीमेशन टाइमलाइन के प्रत्येक चरण के लिए सीएसएस गुण परिभाषित किए गए हैं।

Example:-

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

Animation in CSS: 2. Animation Properties

एक बार @keyframes परिभाषित हो जाने के बाद, आपके एनीमेशन को कार्य करने के लिए एनीमेशन गुण जोड़ना होगा।

Animation in CSS

Animation in CSS

Animation in CSS, एनिमेशन गुण दो काम करते हैं:

1. वे उन तत्वों को @keyframes असाइन करते हैं जिन्हें आप animate करना चाहते हैं।
2. वे परिभाषित करते हैं कि यह कैसे animated है।
ऐनिमेशन गुण CSS तत्वों में जोड़े जाते हैं जिन्हें आप animation करना चाहते हैं। Animation in CSS, एनीमेशन को प्रभावी करने के लिए

आपको निम्नलिखित दो एनीमेशन गुणों को जोड़ना होगा:
1. animation-name: एनीमेशन का नाम, जिसे @keyframes में परिभाषित किया गया है।
2. animation-duration: एनीमेशन की अवधि, सेकंड में (जैसे, 5 एस) या मिलीसेकंड (जैसे, 200ms).
उपरोक्त bounce के साथ जारी रखते हुए, उदाहरण के लिए, हम उस एनीमेशन-नाम और एनीमेशन-अवधि को उस div में जोड़ देंगे जो हम animation करना चाहते हैं।

div {
animation-duration: 2s;
animation-name: bounceIn;
}
Shorthand syntax:

div {
animation: bounceIn 2s;
}

Animation in CSS सामग्री का रचनात्मक एनिमेशन करना संभव बनाता है, लेकिन CSS का उपयोग नहीं करता है। हालाँकि, कई बार ऐसा होता है जब यह सुविधा उपलब्ध नहीं होती है, और आप एक समान प्रभाव का अनुकरण करने के लिए Javascript कोड का उपयोग करके उस मामले को संभालना चाह सकते हैं। यह कोड यह देखने के लिए जाँच करेगा कि क्या सीएसएस एनीमेशन समर्थन उपलब्ध है:

var animation = false,
animationstring = ‘animation’,
keyframeprefix = ”,
domPrefixes = ‘Webkit Moz O ms Khtml’.split(‘ ‘),
pfx = ”,
elem = document.createElement(‘div’);

if( elem.style.animationName !== undefined ) { animation = true; }

if( animation === false ) {
if( elem.style[ domPrefixes[i] + ‘AnimationName’ ] !== undefined ) {
pfx = domPrefixes[ i ];
animationstring = pfx + ‘Animation’;
keyframeprefix = ‘-‘ + pfx.toLowerCase() + ‘-‘;
animation = true;
break;
}
}
}

शुरुआत के लिए हम कुछ variables को परिभाषित करते हैं। हम मान लेते हैं कि एनीमेशन को flase से सेटिंग करके एनीमेशन का समर्थन नहीं किया गया है। हम animationstring को एनीमेशन पर सेट करते हैं जो कि वह संपत्ति है जिसे हम बाद में सेट करना चाहते हैं। हम लूप ओवर करने के लिए ब्राउज़र array की एक सरणी बनाते हैं और हम एक खाली string में pfx सेट करते हैं।

तब हम जांचते हैं कि variables एलिमेंट द्वारा निर्दिष्ट तत्व के लिए style collection पर सीएसएस animation-name property सेट है या नहीं। इसका मतलब है कि ब्राउज़र बिना किसी array के CSS animation का समर्थन करता है, जो कि, आज तक, उनमें से कोई भी नहीं करता है।

यदि browser non-prefixed एनीमेशन का समर्थन नहीं करता है और एनीमेशन अभी भी गलत है, तो हम सभी संभावित array पर पुनरावृत्ति करते हैं, क्योंकि सभी प्रमुख ब्राउज़र वर्तमान में इस संपत्ति को prefixe कर रहे हैं और इसके बजाय इसका नाम बदलकर AnimationName कर रहे हैं।

एक बार जब यह कोड पूरा हो जाएगा, तो एनीमेशन का मूल्य गलत होगा यदि CSS एनीमेशन समर्थन उपलब्ध नहीं है, या यह सच होगा। यदि यह सत्य है तो animation property का नाम और कीफ्रेम उपसर्ग दोनों सही होंगे। इसलिए यदि आप एक नए Firefox का उपयोग करते हैं, तो संपत्ति MozAnimation और keyframe prefix -moz होगी और Chrome के साथ यह WebkitAnimation और webkit होगा।

अब जब आप जानते हैं कि CSS एनीमेशन समर्थित है या नहीं, तो हम animation कर सकते हैं।

if( document.styleSheets && document.styleSheets.length ) {
document.styleSheets[0].insertRule( keyframes, 0 );
} else {
var s = document.createElement( ‘style’ );
s.innerHTML = keyframes;
document.getElementsByTagName( ‘head’ )[ 0 ].appendChild( s );

}
}

यह कोड एनीमेशन के मूल्य को देखता है; यदि यह गलत है, तो हमें पता है कि हमें अपने एनीमेशन को निष्पादित करने के लिए हमारे JavaScript fallback कोड का उपयोग करना होगा। अन्यथा, हम desired CSS एनीमेशन प्रभाव बनाने के लिए JavaScript का उपयोग कर सकते हैं।

Animation property सेट करना आसान है; बस style collection में इसके मूल्य को update करें। हालाँकि, keyframes जोड़ना मुश्किल है, क्योंकि वे traditional CSS syntax का उपयोग करके परिभाषित नहीं किए गए हैं|
JavaScript का उपयोग करके हमारे keyframes को परिभाषित करने के लिए, हमें उन्हें CSS string के रूप में लिखना होगा। सभी हम करते हैं एक keyframes variables सेट, प्रत्येक विशेषता उपसर्ग के रूप में यह निर्माण किया है।

The @keyframes Rule

जब आप @keyframes नियम के अंदर CSS शैलियों को निर्दिष्ट करते हैं, तो एनीमेशन निश्चित समय पर धीरे-धीरे वर्तमान शैली से नई शैली में बदल जाएगा। काम करने के लिए एक एनीमेशन पाने के लिए, आपको एनीमेशन को एक तत्व से बांधना चाहिए। निम्न उदाहरण <div> तत्व के लिए “उदाहरण” एनीमेशन को बांधता है। एनीमेशन 4 सेकंड तक चलेगा, और यह धीरे-धीरे <div> तत्व के “लाल” से “पीला” तक पृष्ठभूमि-रंग बदल देगा:

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}

@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

Animation in CSS: animation-duration

animation-duration property परिभाषित करती है कि एक एनीमेशन को पूरा करने के लिए कितना समय लगना चाहिए। यदि animation-duration property निर्दिष्ट नहीं है, तो कोई एनीमेशन नहीं होगा, क्योंकि डिफ़ॉल्ट मान 0s है। प्रतिशत का उपयोग करना भी संभव है। प्रतिशत का उपयोग करके, आप अपनी पसंद के अनुसार कई style परिवर्तन जोड़ सकते हैं।
निम्न उदाहरण <div> तत्व की पृष्ठभूमि-रंग बदल देगा जब एनीमेशन 25% पूर्ण, 50% पूर्ण हो, और फिर से जब एनीमेशन 100% पूर्ण हो|

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}

@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
</style>
</head>
<body>

<p><b>Note:</b> यह उदाहरण Internet Explorer 9 और पुराने संस्करणों में काम नहीं करता है।</p>

<div></div>

</body>
</html>
Animation Times
Animation-iteration-count गुण निर्दिष्ट करता है कि एनीमेशन को कितनी बार चलना चाहिए। निम्नलिखित उदाहरण एनीमेशन बंद होने से पहले 3 बार चलेंगे:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}

@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<div></div>

</body>
</html>

निम्नलिखित उदाहरण “infinite” मान का उपयोग करता है ताकि एनीमेशन जारी रहे।

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}

@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<div></div>

</body>
</html>

Animation in CSS: Animation-direction

Animation-direction की संपत्ति निर्दिष्ट करती है कि क्या एनीमेशन को आगे, पीछे या वैकल्पिक चक्र में खेला जाना चाहिए।

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-direction: reverse;
}

@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<div></div>

</body>
</html>

Animation in CSS

Animation in CSS

Animation in CSS उपलब्ध छोटी और सबसे आसान सीएसएस एनीमेशन लाइब्रेरी में से एक है। अपनी परियोजना के लिए चेतन पुस्तकालय को लागू करना सीएसएस को जोड़ने और अपने HTML तत्वों में आवश्यक सीएसएस कक्षाओं को जोड़ने के रूप में सरल है। यदि आप चाहें तो किसी विशेष घटना पर एनिमेशन को ट्रिगर करने के लिए jQuery का उपयोग कर सकते हैं।

LEAVE A REPLY

Please enter your comment!
Please enter your name here