CSS Tutorial in Hindi [Part 41] - CSS Animations

In this video i will talk about Animations in CSS
The animation property in CSS can be used to animate many other CSS properties such as color, background-color, height, or width. Each animation needs to be defined with the @keyframes at-rule which is then called with the animation property.
Each @keyframes at-rule defines what should happen at specific moments during the animation. For example, 0% is the beginning of the animation and 100% is the end. These keyframes can then be controlled either by the shorthand animation property, or its eight sub-properties, to give more control over how those keyframes should be manipulated.
Sub-properties
animation-name: declares the name of the @keyframes at-rule to manipulate.
animation-duration: the length of time it takes for an animation to complete one cycle.
animation-timing-function: establishes preset acceleration curves such as ease or linear.
animation-delay: the time between the element being loaded and the start of the animation sequence (cool examples).
animation-direction: sets the direction of the animation after the cycle. Its default resets on each cycle.
animation-iteration-count: the number of times the animation should be performed.
animation-fill-mode: sets which values are applied before/after the animation.
For example, you can set the last state of the animation to remain on screen, or you can set it to switch back to before when the animation began.
animation-play-state: pause/play the animation.

[@prateeksharma3268]

ty so much apke tutorials se hi m smjh paya hu proper basic html n css wrna log ekek ghntr m puri kse bta dete h mujhe sach mai aap hi k tutorials dkh kr smjh aaya

[@muhammadmiskeen1198]

Sir mujhe aik assignment Mila hai to is lecture ko samaghny SE kafi help Mili hai thankssssssss JazakAllah 👍👌👌👌✨

[@sachinkumargoswami7778]

1st like.. and first viewer

[@sarimsheikh140]

very helpful and understandable guide Thanks man . Great work 👍

[@SanjeevKumar-mt8gv]

It is so wonderful to get a heart from tech gun😀😀

[@bhagirathiverma2627]

Sir majaa aa gayaa is video Ko dekh kar.... 😄😄😄

[@NitinKumar-dd8ml]

it is hard to learn but it is intresting to learn

[@pramitshah473]

appse puchna tha ki css ke total kitne parts honge ya kitne aur baki he ???? :)

[@komalsethi3295]

Brilliant tutorial 🙏... Never knew that we can also do animation using css.

[@TechGun]

Glad you liked it

[@Qurbanmuhammadali4455]

Sir G your this lecture has great knowledge and information and very interest and I learned many skills by this lecture

[@kumarmantosh7262.official]

Tech Gun has become a very popular site, and I am proud to be learning from this site.

[@NitinKumar-dd8ml]

not site ity is channel

[@learnwithsonu644]

Awesome video Watching at 11

[@angels7290]

The way of teaching is osm

[@prakhar266]

you're simply a legend

[@bidubesra6311]

kya image ke saath bhi ye animation kar sakte hai ?

[@rajchowhan8132]

Sir mai a percentage apna hisab sa de sakata hu kaya? Like 20% 55% ..100% ...is mai kuch problem nahi hoga to please sir reply?

[@Aiuser_563]

Yes

[@Shoyeb21-08]

Hello sir ,, please make a full video on demo website from start to end how to design and how to upload on server,, bcoz ur presentation is the finest and Awesome From all other channels. Please it's a kindly request to u.

[@Qurbanmuhammadali4455]

I wish you lots of success❤️❤️

[@Qurbanmuhammadali4455]

Thank you so much sir G ❤️❤️❤️❤️❤️❤️

[@nishyon2250]

thank you bro

[@avadheshsharma6640]

Nice👌

[@joyjitsinha9253]

😁😁😁😀😀 what a tutorial

[@pramitshah473]

aap boht accha sikhate ho

[@shahbazliaquat00]

❤❤

[@mayankgambhir4312]

Sir transition aur animation me kya difference hua

[@arunangshumullick7817]

Sir...animation is not working...

[@Animation-in]

You are great sir🥰🥰🥰🥰🥰🥰🥰🥰😍😍😍😍😍😍😍😍🤩🤩🤩🤩🤩🥰😇😇😇😊😊😊😊

[@ekbalshodaghar513]

sir how to use multiple @keyframes ?

[@RahulVerma-br6bx]

evrything is great except the background ghanta please stop this