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

CSS - CSS Fonts in hindi, css font kya h,css font use kese kre,hindi me Technamdev.blogspot.com

CSS Fonts Properties से text/content के font को set किया जाता | इन properties में content को bold, italic, font size और अन्य प्रकार से styling की जाती है | CSS Font Generic Name and Font Family Name Font Generic Name Font Families का group होता है | जैसे कि, Sans-serif(generic) है और उसके अंतर्गत Arial, Arial Black, Agency FB, BankGothic, Calibri और आदि कई Fonts होते है | Font Family Name ये simple fonts name होते है | जैसे कि Arial, Arial Black, Agency FB, BankGothic, Calibri, और आदि कई | Agency FB Antiqua Architect Arial bankFuturistic BankGothic Blackletter Blagovest Calibri Comic Sans MS Courier Cursive Decorative Fantasy Fraktur Frosty Garamond Georgia Helvetica Impact Minion Modern Monospace Open Sans Palatino Roman Sans-serif Serif Script Swiss Times Times New Roman Verdana Most used Web Safe Font...
1 comment
Read more

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
HTML Tag क्या होता है – What is HTML Tag and Types of HTML tags in Hindi HTML tag क्या होता है – What is HTML Tag जब भी हम कोई भी webpage डिजाईन करते हैं तो हम उस webpage को डिजाईन करने के लिए कुछ command का उपयोग करते हैं उसको HTML tag कहा जाता है| Tag हमेशा angle bracket के अन्दर लिखा जाता है जैसे  <tag>..</tag>. HTML Tag  बहुत सारे character का set होता है जो की HTML language में commands का काम करता है जिसके द्वारा हम अपने webpage को डिजाईन करते हैं| HTML टैग webpage में hidden keyword होता है जो की हमारे वेब ब्राउज़र को यह बताता है की इस webpage को किस प्रकार formatting करना है| Tags लिखने के रूल: जिस प्रकार programming language में कोई भी function लिखने का रूल होता है उसी प्रकार tags लिखने के भी कुछ रूल होते हैं| तो चलिए देखते हैं की कौन कौन से रूल होते हैं: Tags angle bracket  (<>)  के अन्दर लिखा होना चाहिए| जैसे की <html>. यदि आप tags को angle bracket के अन्दर नहीं लिखेंगे तो वेब ब्राउज़र उसे सिंपल text समझ लेगा और उसे tex...
1 comment
Read more