CSS Animations In Hindi
सीएसएस एनीमेशन आपको किसी भी एचटीएमएल वेबपेज में सीएसएस एनिमेशन कीफ़्रेम का उपयोग कर सिंपल टू काम्प्लेक्स वेबपेज ऑब्जेक्ट एलिमेंट एनिमेशन को क्रिएट करने में हेल्प करता हैं. जिसे उपयोग कर आप अपने साधारण वेबपेज वेबसाइट एलिमेंट ऑब्जेक्ट को इंटरैक्टिव और इफेक्टिव यूजर इंटरफ़ेस एक्सपेरिएंस क्रिएट कर सकते है. आप एक स्टार्ट कीफ़्रेम पॉइंट से एन्ड कीफ़्रेम पॉइंट तक एलिमेंट एनिमेटेड ऑब्जेक्ट को जनरेट कर पाते है।
So let’s better understand all the aspects of using CSS animation in HTML webpage.
Basic syntax of CSS animation.
आप अपने मौजूदा एचटीएमएल वेबपेज में सीएसएस एनिमेशन को दो मुख्य कंपोनेंट्स में डिवाइड कर उपयोग कर सकते है.
- CSS Animation @keyframes – यहाँ आप अपने मौजूदा एचटीएमएल वेबपेज में सीएसएस एनिमेशन के दौरान मल्टीप्ल एलिमेंट पॉइंट्स पर ऑब्जेक्ट एलिमेंट एनीमेशन स्टाइल्स को डिफाइन कर सकते है।
- CSS Animation Properties – मौजूदा एचटीएमएल वेबपेज में सीएसएस एनिमेशन वेबपेज ऑब्जेक्ट एलिमेंट में एनीमेशन को अप्लाई किया जाता है।
Basic syntax of CSS animation in a webpage.
@keyframes animation-name {
from {
/* starting styles */
}
to {
/* ending styles */
}
}
/* You an Use Percentages Animation Style */
@keyframes animation-name {
0% {
/* starting styles */
}
100% {
/* ending styles */
}
}
Basic CSS Animation Properties.
किसी भी एचटीएमएल वेबपेज वेबसाइट में सीएसएस एनिमेशन एनीमेशन इफ़ेक्ट को अप्लाई करने के लिए, आप अपनी जरूरत के अनुसार मल्टीप्ल सीएसएस एनिमेशन प्रॉपर्टीज को मैन्युअल अप्लाई कर सकते हैं.
Common CSS Animation Properties.
- animation-name – यहाँ अपने मौजूदा एचटीएमएल वेबपेज में सीएसएस एनिमेशन को @keyframes के साथ एनिमेशन का नाम उपयोग करते है।
- animation-duration– यहाँ अपने मौजूदा एचटीएमएल वेबपेज में सीएसएस एनिमेशन में स्टार्ट टू एन्ड प्रीव्यू होने में कितना समय लगेगा। जैसे, ( 2s, 400ms) यहाँ समय मिली सेकण्ड्स में है।
- animation-timing-function – यहाँ अपने मौजूदा एचटीएमएल वेबपेज में सीएसएस एनिमेशन में एनिमेशन का स्पीड कर्व डिफाइन करते है। जैसे, (ease, linear, ease-in, ease-out, ease-in-out) आदि, एनीमेशन फंशन का उपयोग करते है।
- animation-delay – यहाँ अपने मौजूदा एचटीएमएल वेबपेज में सीएसएस एनिमेशन को स्टार्ट होने से पहले लगने वाला डिले टाइम है. जैसे, (0s, 4s) यहाँ समय 0 से 4 सेकण्ड्स में है।
- animation-iteration-count – यहाँ अपने मौजूदा एचटीएमएल वेबपेज में सीएसएस एनिमेशन को कितनी बार चलाना या रिपीट करना है, उसे कण्ट्रोल किया जाता है. जैसे, (1, या इनफिनिट) समय तय कर सकते है।
- animation-direction – यहाँ अपने मौजूदा एचटीएमएल वेबपेज में सीएसएस एनिमेशन की डायरेक्शन को कण्ट्रोल कर सकते है, जैसे, (सामान्य, रिवर्स, वैकल्पिक) एनीमेशन डायरेक्शन विकल्प है।
- animation-fill-mode – यहाँ अपने मौजूदा एचटीएमएल वेबपेज में सीएसएस एनिमेशन ऑब्जेक्ट एलिमेंट में एनिमेशन को बिफोर और आफ्टर आर्डर में एनीमेशन स्टाइल इफ़ेक्ट को मैन्युअल अप्लाई किया जाता हैं. जैसे, (आगे, पीछे, दोनों, कोई नहीं) ऑप्शन विकल्प है।
- animation-play-state – यहाँ अपने मौजूदा एचटीएमएल वेबपेज में सीएसएस एनिमेशन करंट कंडीशन क्या है, क्या यूज़ एनिमेशन स्टार्ट है, या स्टॉप है. जैसे, वर्त्तमान में एनीमेशन (चल रहा है, रुका हुआ है)।
Example of CSS animation in HTML webpage.
तो चलिए एचटीएमएल वेबपेज में एक उछलती हुई गेंद के एनिमेशन को समझे।
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let Tray CSS Animation Html Web Page Example</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: pink;
margin: 0;
}
.ballanimation {
margin: 10px;
padding: 10px;
width: 100px;
height: 100px;
background-color: blue;
color: red;
border-radius: 100%;
border-color: blue;
animation: bounce 1s ease-in infinite; /* apply the bounce ease-in infinite animation */
}
@keyframes bounce {
0%, 30%, 60%, 90%, 110% {
transform: translateY(0); /* set bounce object Initial position */
}
50% {
transform: translateY(-170px); /* it Move up bounce object */
}
70% {
transform: translateY(-90px); /* it Move down bounce object */
}
}
</style>
</head>
<body>
<div class=”ballanimation”><center>Ball Animation</center></div>
</body>
</html>
Bouncing Ball animation Css file.
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: pink;
margin: 0;
}
.ballanimation {
margin: 10px;
padding: 10px;
width: 100px;
height: 100px;
background-color: blue;
color: red;
border-radius: 100%;
border-color: blue;
animation: bounce 1s ease-in infinite; /* apply the bounce ease-in infinite animation */
}
@keyframes bounce {
0%, 30%, 60%, 90%, 110% {
transform: translateY(0); /* set bounce object Initial position */
}
50% {
transform: translateY(-170px); /* it Move up bounce object */
}
70% {
transform: translateY(-90px); /* it Move down bounce object */
}
}
CSS Multiple Animation in HTML Webpage.
आप अपने मौजूदा एचटीएमएल वेबपेज में सीएसएस एनिमेशन में मल्टीप्ल एनीमेशन प्रॉपर्टीज को कॉमा ऑपरेटर का उपयोग कर एनीमेशन प्रॉपर्टीज को कर अप्लाई कर सकते है।
CSS Multiple Animation in HTML Webpage Example.
.bouncingball {
animation: bounce 1s ease-in infinite, spin 1s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(260deg);
}
}
Using JavaScript to control CSS animations in HTML webpage.
आप अपने मौजूदा एचटीएमएल वेबपेज में सीएसएस एनिमेशन सीएसएस क्लास को ऐड कर या क्लास को रिमूव कर जावास्क्रिप्ट के साथ एनिमेशन को उपयोग और कण्ट्रोल कर सकते हैं।
JavaScript CSS animations HTML webpage Example.
const ball = document.querySelector(‘.bauncingball’);
ball.addEventListener(‘click’, () => {
ball.classList.toggle(‘animate’); // use toggle animation class in javascript
});
Using CSS animations in HTML webpage Conclusion.
एचटीएमएल वेबपेज में सीएसएस एनिमेशन वेब विजिटर वेबसाइट इंटरफ़ेस या यूजर इंटरैक्शन को इनक्रीस करने और वेबसाइट में अट्रैक्टिव विज़ुअल एनीमेशन इफ़ेक्ट अप्लाई करने का एक सुगम और अच्छा माध्यम हैं। आप अपने वेबपेज के लिए मल्टीप्ल एनिमेशन प्रॉपर्टीज के साथ कीफ़्रेम को ऐड करके, वेब डेवलपर डायनामिक एनिमेशन ऑब्जेक्ट एलिमेंट को क्रिएट कर सकते हैं.
