CSS Transition Tutorial in Hindi / Urdu

In this tutorial you are going to learn css transition property in hindi, urdu language.You can learn how to animate the html elements on hover, focus and on responsive screens with CSS3 property transition.You can also learn transition-duration, transition-delay, transition-timing-function, transition-property for animation of html tags.
By learning this you can easily make image hover effect, color transition effect, animate the shapes through css.

[@bkishwarchavan7787]

I have no word to...express my gratitude about you sir.....I was upset when i started to learn web desining giving fifty thousand. There teaching style was not effective as you. you taught me all this thing ..THANKS SIR ONCE AGAIN

[@YahooBaba]

You are most welcome

[@williamjames6854]

Bhai keep it up good content quality

[@anukashyap4817]

Bahut bahut dhanyawaad sir 🙏🙏🌹🌹 you clear my all doubts of transition.

[@mrmnaeem9154]

great yrr maza a jata hai app ki videos daikh krr kash k app pakistan main hoty or hum loog bhi appmjaisy teacher sy bohat kuch seekh sakty main app k bohat ziyada lecture daikh chokaa hoon or bohat kuch seekh choka hoon Mashallah g great balky greatest God bless You

[@YahooBaba]

Thanks Naeem for appreciating my work.

[@rahulkapoor2583]

Thanks for making such a easy tutorial...

[@indian_gagan]

Thank you so much, sir! easy wasn't working bcz its 'ease' not 'easy'. with all due respect...thank you for creating this content, it's actually helpful for beginners like me! 😀

[@YahooBaba]

Your welcome Gagandeep. I know the 'easy' mistake but can't correct it

[@ashikkhandokar7564]

sir, I am writing from Bangladesh. This is the most favorite tutorial CSS.Thanks for the free give.

[@YahooBaba]

Your welcome Ashik :)

[@ashikkhandokar7564]

Thanks for reply, sir.

[@dream_boy_]

@@YahooBaba I do coding if you want you can watch my video I hope you like it 😍😍😍😍😍

[@dream_boy_]

@@ashikkhandokar7564 I do coding if you want you can watch my video I hope you like it 😍😍😍😍😍

[@payalgupta6476]

you save my web development exam ...keep it up keep growing

[@YahooBaba]

Thanks and welcome :)

[@santeck4480]

Teachers take 2.5 hours for explaining transition 😁 Yahoo baba 25 min 😘

[@cybxtra]

Thank you Soo much sir for putting such a efforts for us and sharing with us ♥️ always loved and enjoyed your video's

[@gamingwithajk7253]

apne jo shoru me img ke sath transition lagai uska code milega ?

[@poonamlahare2840]

Ty so much sir...aapke videos se bahut help hoti h mujhe...

[@YahooBaba]

Your welcome Poonam :)

[@asmasalonashaik6589]

excellent tutorial keep it up

[@ajaykr6253]

I love your teaching style man 🔥 🔥

[@YahooBaba]

Glad you enjoy it!

[@rekhapandey3941]

You are great you teach in full depth

[@YahooBaba]

Glad you think so!

[@poojajaidka1784]

Yahoo baba rocks. Thanks so much sir for making these tutorials.

[@YahooBaba]

Your welcome :)

[@UkaychingMarma-iq7ol]

Thank you so much and love from Bangladesh💝💝💝

[@YahooBaba]

You are most welcome

[@shakirazim]

I like the way of your explaination... 👍👍👍

[@unknown-cj8gv]

I like your tutorials this is easy to learn for css and you all concept are explaining to deeply if you know js so pls put the tutorial s on your channel

[@YahooBaba]

I already make a course on JS. Please follow this link to see our all courses : kzbin.info/door/uT0rj__qEq_ZO3kYwun4Qgplaylists

[@saumyaverma701]

If u understand properly can you plz tell me that image tradition which shown in starting or the video ??

[@631singh]

thanku for making such a good lecture on transition aache se smjh me aagya hai sir

[@YahooBaba]

Your welcome :)

[@jhyrtnucwaqeafieber2471]

Thanx for the information!

[@abdulmoeez13]

Making Great Content :)

[@YahooBaba]

Thanks Abdul :)

[@justcode......2254]

very nice video sir ji.thanks a lot 🤩🤩

[@YahooBaba]

Most welcome

[@manishakanchan7376]

Much well explained 👍 👍 👍

[@YahooBaba]

Thanks for liking

[@soumyaranjanpradhan1325]

Sir , your expalnation is amazing !!

[@YahooBaba]

Thanks a ton

[@furyali1220]

Great Brother❤

[@educatorsfan9536]

Awesome explanation sir ji😉❤️👌👌

[@YahooBaba]

Thanks for liking

[@rohityadav5802]

Wonder full keep it up

[@YahooBaba]

Thank you so much

[@Bharat_scraps]

bhai aapne content bhut he accha A1 quality ek aur ham student ka kar dete tho bahut accha rahita aap ko jiyada mhanat ke liye nhi boln ge app jiyada nhi 5-10 element ke baad aap 1 exercise kara de 🙏🙏🙏🙏🙏

[@YahooBaba]

sure

[@coderguy339]

Thanx a lot bro awesome video!!! excellent explanation. Pls keep making more videos . Subscribed !! ☺️

[@YahooBaba]

Thanks and welcome

[@vivekpalyal]

Very good tutorial....

[@Manishthakur-nx2dj]

Your videos nice

[@yatharthsingh6207]

Thanks sir . ...well done ...well explained

[@YahooBaba]

Thanks for liking

[@anjumanararumela5969]

Thank you..yahoo Baba...☺☺

[@YahooBaba]

Always welcome

[@anjumanararumela5969]

@@YahooBaba Thank you ..and most welcome..Yahoo Baba...

[@programmingskills12145]

I like ur videos

[@kishorisahoo6088]

Thank you so much sir for your effort for making this video 😊

[@YahooBaba]

It's my pleasure

[@tanmaymohanty2244]

awesome sir

[@naitikkathiriya]

Very very thank u brother.. really this video tutorial yours, helped me and let know me the new ones of timing functions that I haven't in my syllabus too,. Always n always helps! Thnx again buddy ✨👏.

[@YahooBaba]

You are welcome

[@muhammadkashif-hc9go]

sir how many ways to use transition without hover in css?Can we use transition without hover in css?

[@abhimanyu6534]

Amazing 👍👍👍👍

[@YahooBaba]

Thank you! Cheers!

[@indalsingh6675]

Transition display par kaam karta hai kya

[@md.sabbirhossain7348]

world class tutorial ❤️❤️

[@munamarziya2546]

Thank you so much. I learned a lot from you 😊

[@YahooBaba]

You are so welcome!

[@Nostalgic_stupid]

Great video sir....mazza aaa gya...css like Nasha...it's makes me nashedi😅😅

[@vishalmahadik5108]

Good explanation But you write 'easy instead of ease' That's why animation not changing 👍🏼

[@YahooBaba]

Yes you are right.

[@priyankabhaurjar]

Once again thank u sir for such an easy way to teach us... Sir mera ek question hai k apane abhi jo b language ko cover krne k lye jitne b videos usme banaye h jaise full tutorial of css html js php etc... To kya isme sab contents cover ho gaye h ya kch baki b h... I mean agar hm us language k apk Full video dekh k practice kare to wo language hm complete sikh chuke honge kya

[@iffatbutt2069]

not rely on one content,there is much more to explore,keep it up.

[@muskanshaikh6477]

Thank you soo much for this vedio

[@YahooBaba]

Most welcome 😊

[@zakieeverything.10]

bhai maza aa gya..

[@YahooBaba]

Thanks Zakie :)

[@mamunur801]

There was a mistake.... 😁 You took easy except ease Just fun...❤️😁 Anyway This video is very helpful... And I've learned a lot of things...thank you sir

[@YahooBaba]

Yes I know this mistake 😊

[@computerCCC]

Sir mainey do circle animation create kiye aor dono color alg chahtey h lkin ek ka colour change krney p dono ka colour same hi rhta h

[@YahooBaba]

show me your code

[@AniketKumar-hy5zo]

very usefull thanks

[@ankitkumaryadav562]

Animation and transition both are same or different??

[@priyapandey6061]

Sir practical to samj aa gaya lekin hume transitions ko define karna ho to kaise define karenge ..

[@sushantdatta109]

Thank you for this awesome video.

[@akashjajoriya8677]

sir last vala silde ka example ki property kya use aapne

[@YahooBaba]

?

[@PSL_God69]

Sir really awesome. I am so grateful to you. God bless you. Sir koi hover ka alag se class hai. Hover keya @media queries ka andarhi Partha hai?

[@YahooBaba]

Hover effects ke kuch videos maine banaye hai as a example : kzbin.info/aero/PL0b6OzIxLPbyq_At-YvkOo2E85-eZ_E1d

[@Abhishek-zu5bn]

Thank You Bhai

[@MovieDakheEnglishShikhun]

My most favorite is the cubic-bezier in timing-function

[@rughyr3dfuyhnopl]

Sir ji Parnam! Ek doubt hai sir:- rajat .ff { border:2px solid red; width:300px; height:300px; background-color:pink; margin:100px auto; } .gg { border:2px solid black; width:200px; height:250px; background-color:brown; transform: perspective(800px) rotateY(0deg); transition:transform perspective(800) rotateY(0deg) 5s; } .gg:hover { transform: perspective(800px) rotateY(60deg); } Sir isme transform jab ho rha hai to 5s kyun nhi le rha? Sir same problem isme aarhi hai:- rajat .ff { border:2px solid red; width:300px; height:300px; background-color:pink; margin:100px auto; } .gg { border:2px solid black; width:200px; height:250px; background-color:brown; transform: perspective(800px) rotateY(60deg) translateZ(0px); transition:transform perspective(800px) rotateY(0deg) translateZ(0px) 3s;} .gg:hover { transform:perspective(800px) rotateY(60deg) translateZ(300px);} please reply sir!

[@theinfernaldev2577]

.gg:hover{ Background-color:black ; Transition:5s; }

[@computingpulse9144]

Amazing !!!!

[@radhikaboro5966]

sir, here just apply one property but how to apply more than one transition property ?

[@ankitatripathi2166]

sir "transition-property" ka use kiye bina bhi 'transition-delay' , width , height, background pe chal raha hai toh what is the need of "transition-property" plz clear my doubt. body { font-family:arial,helvetica; } #box { width:150px; height:150px; background:pink; transition-duration:2s,2s; } #box:hover { width:300px; height:300px; background:orange; }

[@TechnoBrainz]

Jabh ham input box pr click krtey h to wo box BLUE ho jata h. fir wo acha nhi lagta. To usko kese tackle krey ko click krney ke bad wo blue na dikhey ?

[@YahooBaba]

Uske liye hum (:focus) pseudo class use karte hai css mein. For example : .input:focus { outline: none !important; border:1px solid red; box-shadow: 0 0 10px #719ECE; }

[@biplobmondol4539]

Thank you bhaiya

[@MyGamingEra]

best sir

[@haseebraza8787]

sir start m pic pr transition lgai thi us kis trha apply ho gi ?

[@YahooBaba]

See this playlist for Image Hover Effects : kzbin.info/aero/PL0b6OzIxLPbyq_At-YvkOo2E85-eZ_E1d

[@shaziamohdsajimshagufta65]

sir last wala transation kese kia ....upar se yahoo baba slide hokar aara

[@VeerpalKaur-uv9dv]

Are ease and ease-in-out both same?????

[@YahooBaba]

NO... ease means flow is easy from starting to end but ease-in-out means flow is easy only in starting and end but not in middle

[@VeerpalKaur-uv9dv]

@@YahooBaba ok sir thanks

[@iamgauravshakyj]

Thanks sir

[@manitarai2969]

sooooo good!

[@Sahil-fh2oo]

Sir wo input wala smj ni aaya

[@muhammadgulzaib7567]

App ne last div kese bnana tha wo to btaya hi nhi, jis me div a rha tha upper se

[@YahooBaba]

Wo advance topic hai jo maine alag se bataya hua hai. See this playlist for that : kzbin.info/aero/PL0b6OzIxLPbyq_At-YvkOo2E85-eZ_E1d

[@muhammadgulzaib7567]

@@YahooBaba thanks sir I got that very well

[@ahmad_raza.00]

sir video starting m jo 3 example dikhai thi oss m sy last example kis tra krni h ?

[@YahooBaba]

See this playlist for that hover effects : kzbin.info/aero/PL0b6OzIxLPbyq_At-YvkOo2E85-eZ_E1d

[@ahmad_raza.00]

@@YahooBaba sir iss m ap ny nhi btaya ,please ap code dydy

[@YahooBaba]

Code aap humari website se le sakte hai : www.yahoobaba.net

[@ahmad_raza.00]

@@YahooBaba Thanks a lot sir :)

[@shakhawat.official]

sir, if i use transition duration 2s, then i use transition timing property where i use cubic-bezier(1.0,1.0,0.7,1.0)-- so here i take 4 steps and in total 3.7 second but my time duration is 2 second. so how it is possible? # thank so much sir for your videos, its really helpful than any premium course, Love u sir from bangladesh, wish you a very happy life

[@iamdanyaal]

Thank You Sir

[@YahooBaba]

Most welcome

[@saumyaverma701]

Ye IMG m kese ye transition use krege ?

[@engineerslab1664]

I m not able to use multiple property in vs ... For single property its working bt for multiple its not working

[@Rahul-fe4gz]

Sir transition aur animation mei kya difference hai ?

[@YahooBaba]

1) Transition hum kisi event pe lagate hai jaise hover par aur transition ek limited time ke liye hoti hai. 2) Animation ko kisi event pe lagana jaroori nahi hai aur wo infinite time ke liye chala sakte hai.

[@ashusengar1893]

sir is it compulsory to use transiton-porperty while applying the transition because it also working without the transiton-property

[@YahooBaba]

How ?

[@ashusengar1893]

@@YahooBaba I don't know I tried it and it was working without applying transition-property value

[@YahooBaba]

Can u send me the code file at my email : [e-mail]

[@imshabi99]

me watching this video in 2022

[@asmalatif8249]

Best

[@forfun2771]

12:17-13:07 sir apne "ease" ki jaga "easy" likha hai koi bhi transition perform nai hoi

[@YahooBaba]

Yes know..... thanks for comment.

[@aishikdalui_0734]

Sir transition k madat se however kar ne par flower k image ma kaise yahoo baba araha ha uska code agar thora samjha data to accha hota

[@YahooBaba]

Here is a full playlist of Image Hover Effect : kzbin.info/aero/PL0b6OzIxLPbyq_At-YvkOo2E85-eZ_E1d

[@aishikdalui_0734]

Than you so much sir❤💕

[@sewakramsahu9761]

Bhai ye cubic-bezier me 4 se jyada accept kyo nahi kar raha

[@abdulrehmantariq9047]

sir mery smoothness nai aa rahi tansition main.....aur na hi steps wala code run ho raha hai help me????

[@hishamakmal2149]

Sir,how did you get that transition of transparent div on the image?

[@YahooBaba]

Here is a Hover effect playlist for that : kzbin.info/aero/PL0b6OzIxLPbyq_At-YvkOo2E85-eZ_E1d

[@hishamakmal2149]

@@YahooBaba thanks a ton sir!

[@Otakuvfx05]

Please make video on python from starting

[@YahooBaba]

I have to make Python series ....let see when it will happen.

[@tiktoktube1552]

Bhai how to make search bar in html

[@sanjaybisht322]

Thank u sir...

[@samarthkalshetti5008]

It's ease not easy

[@techgamer4150]

Sir vo ease in hai easy nahi sorry to judge but lekin code run nhi karega

[@YahooBaba]

Hello , their are 6 types of trasition-timing-functions ...ease ,linear ,ease-in ,ease-out ,ease-in-out ,cubic-bezier(n,n,n,n) . You can check it online.

[@technicalchandra4648]

Sir img slider ke uper bhi video bnao

[@YahooBaba]

Yes sure coming soon.

[@19861000dinesh]

Sir animation start hoga but mhuje and end mein delay chaiye kaise hoga.text animation

[@YahooBaba]

Just increase the transition-duration

[@19861000dinesh]

@@YahooBaba contact no

[@ankitkumaryadav562]

Sir continuous chalte rhe web page pe wo kaise krte hai???

[@YahooBaba]

Wo CSS ki (Animation) Property hoti hai.... isi playlist mein uska bhi video hai.

[@ankitkumaryadav562]

@@YahooBaba thanku sir. Thanks for reply

[@zainikram336]

Sir same coding ki hai but work nh kar raha

[@YahooBaba]

Show ur code, I will check it.

[@engineerslab1664]

Sir why this not working in vs

[@pratikparalikar8445]

sir aapne vo 1:14 par kaise kiya plzz tell sir

[@YahooBaba]

Hello pratik , aap meri ye playlist dekhiye : kzbin.info/aero/PL0b6OzIxLPbyq_At-YvkOo2E85-eZ_E1d

[@onlyhacker6821]

Sir, Yahoo baba ke name channel hai aapka too aapko browser bhi Yahoo hi use karna chaiye.😊😊

[@YahooBaba]

😀

[@wizminar]

Sir jee app vs code use ke jiye bahut madad ho jayenge aapke upar se free bhi hai :)

[@muhammadattiqurrehmanhaide1280]

Anyone ? Ye image par jo transition lagya hai us par color or text a jata hai hover par ye kesy ho ga ?

[@YahooBaba]

See this playlist for Hover effects : kzbin.info/aero/PL0b6OzIxLPbyq_At-YvkOo2E85-eZ_E1d