Skip to main content

CSS - CSS Animation in hindi

CSS - CSS Animation




CSS Animation के लिए animation property का इस्तेमाल किया जाता है | Animation में Element के CSS Style को कुछ समय देकर एक से ज्यादा CSS Styles में change किया जा सकता है |
Animation के लिए @keyframes rule की जरुरत होती है | animation किस प्रकार से होना चाहिए वो @keyframes के अन्दर define किया जाता है |

Example for animation Property

Animation ये 0% पर start होता है और 100% पर end होता है | शुरुआत में background-color ये black होगा और 5 seconds के बाद background-color ये white हो जायेगा | ये प्रक्रिया infinite(अमर्यादित) times होती है |
<style>
body{
 animation : ani 5s infinite;
}
@keyframes ani{
 0%{background-color:#000;}
 100%{background-color:#FFF;}
}
</style>
<body></body>
Output :


@keyframes Rule
@keyframes पर animation का behavior दिया जाता है | Animation को @keyframes के साथ दिए हुए animation name पर store किया जाता है |
इस animation को execute करने के लिए animation property का इस्तेमाल किया जाता है |

Example for animation Property

Example पर @keyframes rule के जरिये 'ani' इस animation name पर animation को store किया गया है और उसे 'myclass' selector पर execute किया गया है |
<style>
.myclass{
 height : 100px;
 width : 10%;
 animation : ani 3s infinite;
}
@keyframes ani{
 from{width;10%;background-color:black;}
 to{width:100%;background-color:red;}
}
</style>

<div class="myclass"></div>
Output :


animation-delay(Animation कुछ समय के बाद शुरू होना)

Example पर animation को 5 seconds के बाद शुरू हो जायेगा |
negative समय भी दिया जा सकता है लेकिन वहा पर default value '0s' set हो जाती है |
<style>
.myclass{
 height : 100px;
 width : 100px;
 background-color : red;
 animation : ani 1s infinite;
 animation-delay : 5s; /* Negative value is allowed*/
}
@keyframes ani{
 to{margin-left:400px;}
}
</style>

<div class="myclass"></div>
 


animation-direction(Animation को दिशा देना)

animation के लिए direction देने के लिए animation-direction property का इस्तेमाल किया जाता है |
<style>
span{display:inline-block;width:150px;height:100px;}
div{border:4px solid #000;display:inline-block;width:550px;}
.myclass1{
 background-color : red;
 animation : ani1 5s infinite;
 animation-direction : normal;
}
.myclass2{
 background-color : green;
 animation : ani2 5s infinite;
 animation-direction : reverse;
}
.myclass3{
 background-color : blue;
 animation : ani3 5s infinite;
 animation-direction : alternate;
}
.myclass4{
 background-color : yellow;
 animation : ani4 5s infinite;
 animation-direction : alternate-reverse;
}
@keyframes ani1{to{margin-left:400px;}}
@keyframes ani2{to{margin-left:400px;}}
@keyframes ani3{to{margin-left:400px;}}
@keyframes ani4{to{margin-left:400px;}}
</style>

<div>
<!-- Example 1-->
<span class="myclass1">animation-direction:normal;</span><br /> 

<!-- Example 2-->
<span class="myclass2">animation-direction:reverse;</span><br />

<!-- Example 3-->
<span class="myclass3">animation-direction:alternate;</span><br />

<!-- Example 4-->
<span class="myclass4">animation-direction:alternate-reverse;</span>
</div>
   
animation-direction:normal;
animation-direction:reverse;
animation-direction:alternate;
animation-direction:alternate-reverse;


animation-duration

पहले वक्त में Animation को कितनी देर में पूरा होना चाहिए वो animation-duration property पर seconds या milliseconds में दिया जाता है |
<style>
span{display:inline-block;width:150px;height:100px;}
div{border:4px solid #000;display:inline-block;width:550px;}
.myclass1{
 background-color : red;
 animation : ani1 infinite;
 animation-duration : 100ms;
}
.myclass2{
 background-color : green;
 animation : ani2 infinite;
 animation-duration : 500ms;
}
.myclass3{
 background-color : blue;
 animation : ani3 infinite;
 animation-duration : 2s;
}
.myclass4{
 background-color : yellow;
 animation : ani4 infinite;
 animation-duration : 5s;
}
@keyframes ani1{to{margin-left:400px;}}
@keyframes ani2{to{margin-left:400px;}}
@keyframes ani3{to{margin-left:400px;}}
@keyframes ani4{to{margin-left:400px;}}
</style>

<div>
<span class="myclass1">animation-duration:100ms;</span><br />
<span class="myclass2">animation-duration:500ms;</span><br />
<span class="myclass3">animation-duration:2s;</span><br />
<span class="myclass4">animation-duration:5s;</span>
</div>
Output :
animation-duration:100ms;
animation-duration:500ms;
animation-duration:2s;
animation-duration:5s;


animation-fill-mode

Animation end होने पर Element को कहा पर स्थित होना चाहिए वो value animation-fill-mode property द्वारा दी जाती है |
<style>
div{border:4px solid #000;display:inline-block;width:550px;}
span{display:inline-block;width:150px;height:100px;}
.myclass1{
 background-color:red;
 animation : ani1 5s 1;
 animation-fill-mode : forwards;
}
.myclass2{
 background-color:green;
 animation : ani2 5s 1;
 animation-fill-mode : backwards;
}
.myclass3{
 background-color:blue;
 animation : ani3 5s 1;
 animation-fill-mode : both;
}
.myclass4{
 background-color:yellow;
 animation : ani4 5s 1;
 animation-direction : reverse;
 animation-fill-mode : both;
}
@keyframes ani1{to{margin-left:400px;}}
@keyframes ani2{to{margin-left:400px;}}
@keyframes ani3{to{margin-left:400px;}}
@keyframes ani4{to{margin-left:400px;}}
</style>

<div>
<span class="myclass1">animation-fill-mode:forwards;</span><br />
<span class="myclass2">animation-fill-mode:backwards;</span><br />
<span class="myclass3">animation-fill-mode:both;</span><br />
<span class="myclass4">animation-fill-mode:both;<br />animation-direction:reverse;</span><br />
</div>
animation-fill-mode:forwards;
animation-fill-mode:backwards;
animation-fill-mode:both;
animation-fill-mode:both;
animation-direction:reverse;


animation-iteration-count

Animation कितनी बार repeat होना चाहिए वो animation-iteration-count property द्वारा दिया जाता है |
Example में animation को दो बार repeat किया गया है |
<style>
span{
 background-color : red;
 display:inline-block;
 width:150px;
 height:100px;
 animation : ani 5s 1;
 animation-iteration-count : 2;
}
@keyframes ani{to{margin-left:400px;}}
</style>

<span></span>


animation-name

animation का नाम देने के लिए animation-name property का इस्तेमाल किया जाता है |
<style>
span{
 animation : 5s infinite;
 animation-name : ani;
}
@keyframes ani{to{margin-left:400px;}}
</style>

<span>Hello World</span>
Hello World


animation-play-state

Animation को pause या run करने के लिए animation-play-state property का इस्तेमाल किया जाता है |
<style>
span{
 animation : ani 20s infinite;
 animation-play-state : running;
}
@keyframes ani{to{margin-left:400px;}}
</style>

<button onclick="myfunc1()">Pause</button>
<button onclick="myfunc2()">Play</button><br />

<span>Hello World</span>

<script>
function myfunc1(){
document.getElementsByTagName("span")[0].style.animationPlayState = "paused";
}
function myfunc2(){
document.getElementsByTagName("span")[0].style.animationPlayState = "running";
}
</script>
 
Hello World


animation-timing-function

Animation किस प्रकार की speed देकर घूमना चाहिए वो animation-timing-function द्वारा दिया जाता है |
<style>
span{
 display : inline-block;
 padding : 20px;
 background-color : red;
 animation : ani 5s infinite;
}

.myclass1{animation-timing-function: linear;}
.myclass2{animation-timing-function: ease;}
.myclass3{animation-timing-function: ease-in;}
.myclass4{animation-timing-function: ease-out;}
.myclass5{animation-timing-function: ease-in-out;}

@keyframes ani{to{margin-left:400px;}}
</style>

<span class="myclass1">linear</span><br />
<span class="myclass2">ease</span><br />
<span class="myclass3">ease-in</span><br />
<span class="myclass4">ease-out</span><br />
<span class="myclass5">ease-in-out</span><br />
linear
ease
ease-in
ease-out
Animation PropertiesDescription
animationanimation की सभी properties को इस property पर दिया जाता है |
animation-delayanimation कितने वक्त के बाद start होना चाहिए वो milliseconds या seconds में दिया जाता है |
animation-directionanimation की direction दी जाती है |
animation-durationAnimation एक time पर कितनी देर चलना चाहिए वो milliseconds या seconds में दिया जाता है |
animation-fill-modeAnimation complete होने पे कहा पर स्थित होना चाहिए वो दिया जाता है |
animation-iteration-countAnimation कितनी बार repeat होना चाहिए वो दिया जाता है |
animation-nameAnimation का नाम दिया जाता है |
animation-play-stateAnimation को run या pause करने के लिए इस्तेमाल किया जाता है |
animation-timing-functionAnimation किस प्रकार की speed देकर घूमना चाहिए वो दिया जाता है |

Comments

Post a Comment

Popular posts from this blog

Create a Responsive Login Form in HTML and CSS in Hindi

Create a Responsive Login Form in HTML and CSS in Hindi                                                              Login Form in HTML and CSS In this video, we will we see How to Create a Responsive Login Form in HTML and CSS in Hindi step by step. As you can see I try to make a Login form that should be different from others available online on any social media. Believe me, you gonna learn many new technique and tips on how to make a Responsive Login Form in HTML and CSS in Hindi. Let's talk about the background of the Login form in Hindi first. You can see It's a diagonal background and I know must of are thinking how we can create a diagonal webpage. Believe me, I wrote only one line of code to get the diagonal background on my Login Form in Hindi. background-image: linear-gradient(to top right,...
Post a Comment
Read more

CSS - CSS Colors in hindi, css color kese select kre , kya h.

Colors ये websites के लिए बहुत ही महत्वपूर्ण हिस्सा है | अगर आप एक बढ़िया website चाहते हो तो colors का इस्तेमाल किया ही जाना चाहिए | c o l o r Some Common Colors in CSS Color Name Hex Color Code RGB Color Code WHITE #FFFFFF RGB(255, 255, 255) SILVER #C0C0C0 RGB(192, 192, 192) GRAY/GREY #808080 RGB(128, 128, 128) BLACK #000000 RGB(0, 0, 0) RED #FF0000 RGB(255, 0, 0) MAROON #800000 RGB(128, 0, 0) YELLOW #FFFF00 RGB(255, 255, 0) OLIVE #808000 RGB(128, 128, 0) LIME #00FF00 RGB(0, 255, 0) GREEN #008000 RGB(0, 128, 0) AQUA/CYAN #00FFFF RGB(0, 255, 255) TEAL #008080 RGB(0, 128, 128) BLUE #0000FF RGB(0, 0, 255) NAVY #000080 RGB(0, 0, 128) FUCHSIA #FF00FF RGB(255, 0, 255)) PURPLE #800080 RGB(128, 0, 128)) Example <h1 style="background-color:white;">WHITE</h1> <h1 style="background-color:silver;">SILVER</h1> <h1 style="background-color:gray;">GRAY</h1> <h1 style="background-color:black;...
Post a Comment
Read more

Xiaomi 17 सितंबर को भारत में लॉन्च करेगी 65 इंच Mi TV

Xiaomi 17 सितंबर को भारत में लॉन्च करेगी 65 इंच Mi TV Xiaomi ने हाल ही चीनी मार्केट में फुल-स्क्रीन मी टीवी रेंज और एक 65 इंच म्यूरल टीवी को लॉन्च किया था। संभव है कि कंपनी इन मॉडल को भारत लाए। ख़ास बातें 17 सितंबर को शाओमी का Smarter Living 2020 इवेंट आयोजित होगा लेटेस्ट फिटनेस बैंड Mi Band 4 को भी इसी दिन लॉन्च किया जाएगा मार्केट में कंपनी का सबसे बड़ा टेलीविजन 55 इंच का है Xiaomi भारत में 17 सितंबर को एक इवेंट आयोजित करने वाली है। कंपनी इस इवेंट में 65 इंच का मी टीवी लॉन्च कर सकती है जो 4K स्मार्ट एलईडी डिस्प्ले पैनल से लैस होगा। कंपनी ने इससे पहले ‘Smarter Living 2020' इवेंट का इनवाइट भेजा था। हाल ही में बताया गया कि इस इवेंट में कंपनी मी बैंड 4 को पेश करेगी। पहले चर्चा थी कि कंपनी इसके साथ रेडमी टीवी को लॉन्च करेगी जिसे हाल ही में चीनी मार्केट में उतारा गया था। लेकिन अब कंपनी ने लेटेस्ट टीज़र के ज़रिए लगभग पुष्टि कर दी है कि वह 65 इंच वाला मी टीवी लाने वाली है। मी इंडिया ने ट्विटर पर नए मी टीवी के लॉन्च का  टीज़र जारी किया  है। कंपनी ने बताया है ...
Post a Comment
Read more