एनीमेशन से संबंधित CSS प्रॉपर्टी

Articles

यह लेख एनीमेशन से संबंधित CSS प्रॉपर्टी की व्याख्या करता है।

आप @keyframes, animation, और transition प्रॉपर्टी के उपयोग और सिंटैक्स के बारे में जान सकते हैं।

YouTube Video

प्रीव्यू के लिए HTML

css-animation.html

 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-animation.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties For Animation</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Animation Related Properties</h2>
20        </header>
21        <article>
22            <h3>@keyframes</h3>
23            <section>
24                <h4>Animation Examples</h4>
25                <header><h4>animation: slide 3s ease infinite</h4></header>
26                <section class="sample-view">
27                    <div class="box-animation-slide">Slide Box</div>
28                </section>
29                <header><h4>animation: color-change 3s ease infinite</h4></header>
30                <section class="sample-view">
31                    <div class="box-animation-color-change">Color Change Box</div>
32                </section>
33                <header><h4>animation: fade 3s ease infinite</h4></header>
34                <section class="sample-view">
35                    <div class="box-animation-fade">Fade Box</div>
36                </section>
37            </section>
38        </article>
39        <article>
40            <h3>animation</h3>
41            <section>
42                <h4>Animation Examples</h4>
43                <header><h4>animation: slide 3s ease-in-out infinite</h4></header>
44                <section class="sample-view">
45                    <div class="box-animation-ease-in-out">Slide Box</div>
46                </section>
47                <header><h4>animation: color-change 3s ease-in-out 1s 3 alternate</h4></header>
48                <section class="sample-view">
49                    <div class="box-animation-alternate">Color Change Box</div>
50                </section>
51            </section>
52        </article>
53        <article>
54            <h3>transition</h3>
55            <section>
56                <h4>Transition Examples</h4>
57                <header><h4>transition: background-color 2s ease</h4></header>
58                <section class="sample-view">
59                    <div class="transition-box">Hover me!</div>
60                </section>
61                <header><h4>transition: background-color 5s ease, width 0.5s ease-in</h4></header>
62                <section class="sample-view">
63                    <div class="transition-2-properties">Hover me!</div>
64                </section>
65            </section>
66        </article>
67    </main>
68</body>
69</html>

एनीमेशन और ट्रांज़िशन

`@keyframes` नियम

 1/* Animation definition */
 2@keyframes slide {
 3    0% {
 4        transform: translateX(0);
 5    }
 6    50% {
 7        transform: translateX(200px);
 8    }
 9    100% {
10        transform: translateX(0);
11    }
12}
13
14/* Apply the animation */
15.box-animation-slide {
16    width: 100px;
17    height: 100px;
18    background-color: skyblue;
19    animation: slide 3s ease infinite;
20}

@keyframes का उपयोग CSS एनीमेशन में यह निर्धारित करने के लिए किया जाता है कि एनीमेशन के दौरान स्टाइल कैसे बदलते हैं। @keyframes में, एनीमेशन की शुरुआत से अंत तक स्टाइल बदलावों को समय प्रतिशत या कीवर्ड्स (from और to) द्वारा निर्दिष्ट किया जाता है।

यह एक एनीमेशन का उदाहरण है जहां एक तत्व बाईं से दाईं ओर स्लाइड करता है और अपनी मूल स्थिति में वापस आता है।
इस उदाहरण में, @keyframes के बाद slide लिखा गया है, जो एक एनीमेशन को slide नाम देता है।
0% एनीमेशन की शुरुआत है, जहां translateX(0) द्वारा तत्व को उसकी मूल स्थिति में रखा जाता है।
50% एनीमेशन का मध्य बिंदु है, जहां तत्व translateX(200px) का उपयोग करके 200px दाईं ओर चलता है।
100% एनीमेशन का अंत है, जहां तत्व अपनी मूल स्थिति में वापस आ जाता है।
box-animation-slide क्लास में, animation प्रॉपर्टी का उपयोग 3-सेकंड के अंतराल पर slide एनीमेशन लागू करने के लिए किया जाता है।

 1@keyframes color-change {
 2    0% {
 3        background-color: red;
 4    }
 5    25% {
 6        background-color: blue;
 7    }
 8    50% {
 9        background-color: green;
10    }
11    75% {
12        background-color: yellow;
13    }
14    100% {
15        background-color: red;
16    }
17}
18
19.box-animation-color-change {
20    width: 100px;
21    height: 100px;
22    background-color: skyblue;
23    animation: color-change 3s ease infinite;
24}

आप एनीमेशन के दौरान स्टाइल्स को सटीकता से नियंत्रित कर सकते हैं। प्रतिशत निर्दिष्ट करके, आप मनमाने समय पर विभिन्न स्टाइल्स लागू कर सकते हैं।
- इस उदाहरण में, रंग धीरे-धीरे लाल से नीले, हरे, पीले और फिर से लाल रंग में बदलता है।

 1@keyframes fade {
 2    from {
 3        opacity: 0;
 4    }
 5    to {
 6        opacity: 1;
 7    }
 8}
 9
10.box-animation-fade {
11    width: 100px;
12    height: 100px;
13    background-color: blue;
14    animation: fade 3s ease infinite;
15}

इस उदाहरण में, from 0% के समतुल्य है और to 100% के समतुल्य है। यह आपको सरल एनीमेशन को परिभाषित करने की अनुमति देता है।

मूल वाक्यविन्यास

 1@keyframes animation-name {
 2    0% {
 3        /* Style at the start */
 4    }
 5    50% {
 6        /* Style at the midpoint */
 7    }
 8    100% {
 9        /* Style at the end */
10    }
11}

animation-name: एनीमेशन का नाम। animation प्रॉपर्टी या animation-name प्रॉपर्टी का उपयोग करके इसे निर्धारित किया जाता है।
प्रतिशत या कीवर्ड्स: 0% से 100% तक प्रतिशत, या कीवर्ड्स from (0% के समतुल्य) और to (100% के समतुल्य) का उपयोग करें।

`animation` प्रॉपर्टी

1.box-animation-ease-in-out {
2    width: 100px;
3    height: 100px;
4    background-color: skyblue;
5    animation: slide 3s ease-in-out infinite;
6}

एनिमेशन प्रॉपर्टी का उपयोग किसी तत्व पर एनीमेशन लगाने के लिए किया जाता है। एनीमेशन यह निर्धारित करते हैं कि समय के साथ CSS शैली का सेट कैसे बदलता है। एनिमेशन प्रॉपर्टी के साथ, आप एनीमेशन का समय, व्यवहार, देरी, पुनरावृत्ति की संख्या और अधिक को नियंत्रित कर सकते हैं।

box-animation-ease-in-out क्लास slide को एनिमेशन-नाम के रूप में निर्दिष्ट करती है, और @keyframes में परिभाषित slide एनीमेशन का उपयोग करती है।
- 3s एनिमेशन-अवधि है, जिसका अर्थ है कि प्रत्येक एनीमेशन चक्र 3 सेकंड में पूरा होता है।
- ease-in-out एनिमेशन-समय-फंक्शन है, जो एनीमेशन को धीरे-धीरे शुरू करने, गति बढ़ाने और अंत में फिर से धीमा करने का कारण बनता है।
- infinite एनिमेशन-आवृत्ति-गिनती है, जिसका अर्थ है कि एनीमेशन असीमित बार दोहराया जाएगा।

1.box-animation-alternate {
2    width: 100px;
3    height: 100px;
4    background-color: skyblue;
5    animation: color-change 3s ease-in-out 1s 3 alternate;
6}

box-animation-alternate क्लास color-change को एनिमेशन-नाम के रूप में निर्दिष्ट करती है, और @keyframes में परिभाषित color-change एनीमेशन का उपयोग करती है।
- ease-in-out के बाद का 1s एनिमेशन-विलंब है, जो निर्दिष्ट करता है कि एनीमेशन शुरू होने से पहले कितनी देरी होगी। एनीमेशन 1 सेकंड बाद शुरू होगा।
- 1s के बाद का 3 एनिमेशन-आवृत्ति-गिनती है, जिसका अर्थ है कि एनीमेशन 3 बार दोहराता है।
- alternate एनिमेशन-दिशा है, जो एनीमेशन प्लेबैक की दिशा निर्दिष्ट करता है। alternate निर्दिष्ट करता है कि एनीमेशन वैकल्पिक रूप से चलेगा।

`एनिमेशन` प्रॉपर्टी की संरचना।

एनिमेशन प्रॉपर्टी एक शॉर्टहैंड प्रॉपर्टी है, जो कई उप-प्रॉपर्टीज़ को एक में संयोजित करती है। यहाँ मुख्य उप-प्रॉपर्टीज़ हैं:।

animation-name प्रॉपर्टी: लागू होने वाले एनीमेशन का नाम निर्दिष्ट करती है। यह @keyframes में परिभाषित एनीमेशन नाम से मेल खाना चाहिए।
animation-duration प्रॉपर्टी: यह निर्दिष्ट करती है कि एनीमेशन को एक चक्र पूरा करने में कितना समय लगता है। समय इकाइयां सेकंड (s) या मिलीसेकंड (ms) होती हैं।
animation-timing-function प्रॉपर्टी: एनीमेशन की गति-वक्र निर्दिष्ट करती है। ease, linear, ease-in, ease-out, ease-in-out आदि जैसे मानों का उपयोग किया जाता है।
- ease निर्दिष्ट करने से एनीमेशन धीरे-धीरे शुरू होता है, गति बढ़ जाती है, और फिर अंत में धीमा हो जाता है।
- linear निर्दिष्ट करने से एनीमेशन शुरू से अंत तक एक समान गति से आगे बढ़ता है।
- Ease-in निर्दिष्ट करने से एनीमेशन धीमे शुरू होता है और तेजी से समाप्त होता है।
- Ease-out निर्दिष्ट करने से एनीमेशन तेजी से शुरू होता है और धीरे समाप्त होता है।
- Ease-in-out निर्दिष्ट करने से एनीमेशन धीरे शुरू होता है, तेजी से आगे बढ़ता है और फिर धीरे समाप्त होता है।
Animation-delay प्रॉपर्टी यह निर्दिष्ट करती है कि एनीमेशन शुरू होने से पहले कितना विलंब होगा। समय इकाई या तो सेकंड या मिलीसेकंड होती है।
Animation-iteration-count प्रॉपर्टी यह निर्दिष्ट करती है कि एनीमेशन कितनी बार दोहराया जाए। Infinite निर्दिष्ट करने से एनीमेशन अनिश्चित काल तक दोहराया जाएगा।
Animation-direction प्रॉपर्टी एनीमेशन प्लेबैक की दिशा निर्दिष्ट करती है। विकल्पों में Normal (आगे की दिशा), Reverse (पीछे की दिशा), Alternate (बारी-बारी से प्ले करना), और Alternate-reverse (पीछे की दिशा से शुरू होने वाला बारी-बारी प्ले करना) शामिल हैं।
Animation-fill-mode प्रॉपर्टी यह निर्दिष्ट करती है कि एनीमेशन शुरू होने से पहले और समाप्त होने के बाद क्या स्थिति होगी। आप None, Forwards, Backwards, या Both में से कोई भी निर्दिष्ट कर सकते हैं।
Animation-play-state प्रॉपर्टी यह निर्दिष्ट करती है कि एनीमेशन चालू है या रुका हुआ है। आप Running या Paused निर्दिष्ट कर सकते हैं।

सारांश

Animation प्रॉपर्टी तत्वों के स्टाइल को गतिशील रूप से बदलने के लिए एक शक्तिशाली उपकरण है। @keyframes का उपयोग करके, आप यह परिभाषित कर सकते हैं कि समय के साथ स्टाइल कैसे बदलती है और animation की प्रत्येक सहायक प्रॉपर्टी के जरिए एनीमेशन के विस्तृत व्यवहार को नियंत्रित कर सकते हैं।

`Transition` प्रॉपर्टी

 1.transition-box {
 2    background-color: lightgray;
 3    transition: background-color 2s ease;
 4}
 5
 6.transition-box:hover {
 7    background-color: steelblue;
 8}
 9
10.transition-2-properties {
11    background-color: lightgray;
12    width: 150px;
13    height: 50px;
14    transition: background-color 5s ease, width 0.5s ease-in;
15}
16
17.transition-2-properties:hover {
18    background-color: blue;
19    width: 250px;
20}

Transition प्रॉपर्टी का उपयोग CSS स्टाइल परिवर्तनों पर एनीमेशन प्रभाव लागू करने के लिए किया जाता है। यह बदलावों को जैसे Hover, Focus, Active, या जब स्टाइल को जावास्क्रिप्ट द्वारा गतिशील रूप से बदला जाता है, तब धीरे-धीरे प्रकट होने देता है।

आइए Transition-box क्लास का एक उदाहरण देखें, जहां बटन पर माउस ले जाने पर पृष्ठभूमि का रंग धीरे-धीरे बदलता है। - Transition-box क्लास में, Transition प्रॉपर्टी पृष्ठभूमि रंग परिवर्तन पर 2-सेकंड का ट्रांज़िशन लागू करती है। परिवर्तन को Ease के रूप में निर्दिष्ट किया गया है, जिससे यह चिकना बनता है। - Hover स्यूडो-क्लास बटन पर माउस के ले जाने पर पृष्ठभूमि रंग को Lightgray से Steelblue में बदल देती है। यह परिवर्तन Transition-box क्लास में निर्दिष्ट 2-सेकंड के दौरान धीरे-धीरे होता है।

एक साथ कई प्रॉपर्टी पर Transition लागू करना संभव है। - Transition-2-properties क्लास के उदाहरण में, पृष्ठभूमि का रंग 5 सेकंड में बदलता है और चौड़ाई 0.5 सेकंड में बदलती है।

मूल वाक्यविन्यास

1/* Basic syntax of transition */
2transition: property duration timing-function delay;

यह property निर्दिष्ट करती है कि एनिमेशन को किन CSS प्रॉपर्टीज़ पर लागू किया जाना चाहिए। all निर्दिष्ट करने से एनिमेशन सभी प्रॉपर्टीज़ पर लागू हो जाता है।
duration यह निर्दिष्ट करता है कि एनिमेशन को पूरा होने में कितना समय लगेगा। सेकंड (s) या मिलीसेकंड (ms) का उपयोग करके निर्दिष्ट करें।
timing-function एनिमेशन की गति में बदलाव को निर्दिष्ट करती है। आप ease, linear, ease-in, ease-out, ease-in-out आदि विकल्पों का उपयोग कर सकते हैं।
delay यह निर्दिष्ट करता है कि एनिमेशन शुरू होने से पहले कितना विलंब होगा। सेकंड या मिलीसेकंड में निर्दिष्ट करें।

`transition` की विस्तृत प्रॉपर्टीज़।

1/* Detailed properties of transition */
2transition-property: background-color;
3transition-duration: 0.3s;
4transition-timing-function: ease;
5transition-delay: 500ms;

transition को निम्नलिखित रूप से अलग-अलग प्रॉपर्टीज़ के रूप में भी उपयोग किया जा सकता है।

transition-property: यह उन प्रॉपर्टीज़ को निर्दिष्ट करता है जिन पर एनिमेशन लागू होता है।
transition-duration: यह निर्दिष्ट करता है कि एनिमेशन को पूरा होने में कितना समय लगता है।
transition-timing-function: यह एनिमेशन की गति की प्रगति को निर्दिष्ट करता है। ease, linear, ease-in, ease-out, ease-in-out जैसे विकल्पों का उपयोग किया जा सकता है।
transition-delay: यह निर्दिष्ट करता है कि एनिमेशन शुरू होने से पहले कितना विलंब होगा।

आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।

YouTube Video

फिल्टर इफेक्ट्स से संबंधित CSS गुण

एनीमेशन से संबंधित CSS प्रॉपर्टी

YouTube Video

प्रीव्यू के लिए HTML

एनीमेशन और ट्रांज़िशन

@keyframes नियम

मूल वाक्यविन्यास

animation प्रॉपर्टी

एनिमेशन प्रॉपर्टी की संरचना।

सारांश

Transition प्रॉपर्टी

मूल वाक्यविन्यास

transition की विस्तृत प्रॉपर्टीज़।

YouTube Video

`@keyframes` नियम

`animation` प्रॉपर्टी

`एनिमेशन` प्रॉपर्टी की संरचना।

`Transition` प्रॉपर्टी

`transition` की विस्तृत प्रॉपर्टीज़।