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-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-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-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
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 देकर घूमना चाहिए वो दिया जाता है | |
Comments
Post a Comment