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 Properties	Description
animation	animation की सभी properties को इस property पर दिया जाता है \|
animation-delay	animation कितने वक्त के बाद start होना चाहिए वो milliseconds या seconds में दिया जाता है \|
animation-direction	animation की direction दी जाती है \|
animation-duration	Animation एक time पर कितनी देर चलना चाहिए वो milliseconds या seconds में दिया जाता है \|
animation-fill-mode	Animation complete होने पे कहा पर स्थित होना चाहिए वो दिया जाता है \|
animation-iteration-count	Animation कितनी बार repeat होना चाहिए वो दिया जाता है \|
animation-name	Animation का नाम दिया जाता है \|
animation-play-state	Animation को run या pause करने के लिए इस्तेमाल किया जाता है \|
animation-timing-function	Animation किस प्रकार की speed देकर घूमना चाहिए वो दिया जाता है \|

ITI ES important question in hindi with pdf

Technical INFO Click and go to my youtube chennel for more videos 1. निम्न में से कोनसा "पोजेसिव प्रोनाउन " है ? (A) Mine (B) Us (C) He (D) They Ans: A 2. निम्न में से कोनसा "Good Bye" कहने से सम्बंधित है ? (A) How are you? (B) See you soon (C) You can call me (D) Very well Ans: B 3. "Paradox" का पर्यायवाची है.............. (A) Paradise (B) Question (C) Puzzle (D) Challenge Ans: C 4. CV का पूर्ण रूप है........... (A) Curriculum Vita (B) Curriculum Vitesse (C) Curriculum Vitra (D) Curriculum Vitae Ans: D 5. "Good" का क्रिया विशेषण क्या है ? (A) Good (B) Better (C) Best (D)Well Ans: D 6. बोले गए शब्दों का लिखित भाषा में रूपातंरण होता है ? (A) प्रतिरोपण (B) प्रसारण (C) प्रतिलेखन (D) अनुवादन Ans: C 7. प्रतिलेखन को ....... भी कहते हैं? (A) Notation (अंकन) (B) Citation (उद्धरण) (C) Translation (अनुवादन) (D) Transmission (प्रसारण) Ans: A 8. "Communication" शब्द लैटिन के किस शब्द से उत्पन्न हुआ है। (A) Community (B) ...

Technical Info

Search This Blog