CSS Animation in hindi
I am working as freelancer. I am a experienced full stack web developer. My lovely stack is MERN but I am open for new tech. I love to work with teammates for achieve goals. I love researches to find specific new things.
Css में Animation काफी महत्वपूर्ण है, क्योंकि यह content में जान डालकर उसे move करा देता है। इससे काफी यूजर प्रभावित होते हैं।
What is Animation in CSS?
इसका मतलब है कि चीजों को जीवंत बना देना यानी content को movement देखकर real object की तरह दिखाना ही animation है।
Use of Animation in CSS
Animation का प्रयोग करने के लिए कई styles को अच्छे से समझना जरूरी होता है। क्योंकि styles ही content को movement object बनाती हैं। Animation को बनाने के लिए इन चीजों को समझना जरूरी है-
@keyframes Rules
Css में animation बनाने के लिए @keyframes को define किया जाता है।
keyframes कुछ इस तरह बना होना चाहिए-
@keyframes animation name{
0%{
property:value;
}
....
...
100%{ property:value;
}
}
अथवा from{....
to{....
में define होना चाहिए।
animation name को element की style में जरूर लिखना चाहिए। नहीं तो animation apply नहीं होगी।
animation duration भी जरूर लिखा होना चाहिए, नहीं तो animation नहीं चलेगा,क्योंकि इसकी default value 0 होती है।
animation-name
Animation के लिए animation name लिखा जाता है, जो content style में और keyframe के साथ जरूर लिखी जाती हैं। जैसे-
animation-name:box_animation;animation-duration
इसके बिना भी animation नहीं चलेगा। यह बताता है कि animating में समय कितना लगेगा? जैसे-
animation-duration:4s;animation-delay
यह तय करती है कि animation start होने से पहले कितना समय रुकी रहेगी। जैसे
animation-delay:3sइसका मतलब 3 सेकण्ड बाद animation start होगी। इसकी value negative भी हो सकती है।
animation-iteration-count
यह तय करता है कि animation कितनी बार चलेगा। यह अनंत infinite भी हो सकता है।
जैसेः
animation-iteration-count:4;animation-direction
यह दिशा बताता है कि animation किस दिशा में चलेगी सीधा या उल्टा।
जैसेः
animation-direction:reverse;यह निम्न values लेता है-
normal
यह default होता है।
reverse
यह उल्टी दिशा यानी reverse चलती है।
alternate
यह पहले सीधा जाता है और फिर उल्टा चलता है।
alternate-reverse
यह animation पहले उल्टा चलता है और फिर सीधा चलता है।
animation-timing-function
यह animation की movement speed को slow fast करता है।
animation-timing-function:linear;इसके कुछ values इस प्रकार हैं-
i. ease
ii. ease-in
iii. ease-out
iv. ease-in-out
v. linear
vi. cubic-bezier(n,n,n,n)
animation-fill-mode
यह animation की initial property और last property को manage करता है।
none
इसमें कोई भी changes नहीं होते हैं, पहले की तरह चलता रहता है।
forwards
यह animation की आखिरी position को बनाए रखता है, फिर से शुरु पर आकर नहीं रुक जाता ।
backwards
animation की पहली keyframes property को animation से पहले ही apply कर देता है।
both
यह initial और last keyframes को animation शुरु होने से पहले और शुरू होने के बाद apply करता है।
animation: shorthand
animation को shorthand में भी लिखा जा सकता है, जिससे कई लाइन लिखने की जरूरत नहीं पड़ती है।
जैसे
animation:box_ani, 3s, linear, 4, reverse;syntax:
animation:animation-name,animation-duration,animation-timing-function,animation-delay,animation-iteration-count,animation-direction;
