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.

[@williamjames6854]

Bhai keep it up good content quality

[@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

[@asmasalonashaik6589]

excellent tutorial keep it up

[@rahulkapoor2583]

Thanks for making such a easy tutorial...

[@santeck4480]

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

[@Timed-Automaton]

Correct, Yahoo Baba the best.

[@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

[@anukashyap4817]

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

[@payalgupta6476]

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

[@YahooBaba]

Thanks and welcome :)

[@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 ?

[@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
😍😍😍😍😍

[@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.

[@Manishthakur-nx2dj]

Your videos nice

[@abdulmoeez13]

Making Great Content :)

[@YahooBaba]

Thanks Abdul :)

[@rohityadav5802]

Wonder full keep it up

[@YahooBaba]

Thank you so much

[@TrendingVideo812_.]

Thank you for this awesome video.

[@YahooBaba]

Glad you liked it!

[@tanmaymohanty2244]

awesome sir

[@jhyrtnucwaqeafieber2471]

Thanx for the information!

[@UkaychingMarma-iq7ol]

Thank you so much and love from Bangladesh💝💝💝

[@YahooBaba]

You are most welcome

[@justcode......2254]

very nice video sir ji.thanks a lot
🤩🤩

[@YahooBaba]

Most welcome

[@poojajaidka1784]

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

[@YahooBaba]

Your welcome :)

[@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 : ruclips.net/channel/UCuT0rj__qEq_ZO3kYwun4Qgplaylists

[@saumyaverma701]

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

[@rekhapandey3941]

You are great you teach in full depth

[@YahooBaba]

Glad you think so!

[@coderguy339]

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

[@YahooBaba]

Thanks and welcome

[@educatorsfan9536]

Awesome explanation sir ji😉❤️👌👌

[@YahooBaba]

Thanks for liking

[@manishakanchan7376]

Much well explained 👍 👍 👍

[@YahooBaba]

Thanks for liking

[@vivekpalyal]

Very good tutorial....

[@631singh]

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

[@YahooBaba]

Your welcome :)

[@shakirazim]

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

[@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

[@poonamlahare2840]

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

[@YahooBaba]

Your welcome Poonam :)

[@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

[@ajaykr6253]

I love your teaching style man 🔥 🔥

[@YahooBaba]

Glad you enjoy it!

[@muhammadkashif-hc9go]

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

[@programmingskills12145]

I like ur videos

[@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

[@rajatgoel7421]

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;
}

[@MyGamingEra]

best sir

[@ConvertedMullah_toiletcleaner]

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 : ruclips.net/p/PL0b6OzIxLPbyq_At-YvkOo2E85-eZ_E1d

[@anjumanararumela5969]

Thank you..yahoo Baba...☺☺

[@YahooBaba]

Always welcome

[@anjumanararumela5969]

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

[@yatharthsingh6207]

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

[@YahooBaba]

Thanks for liking

[@iamgauravshakyj]

Thanks sir

[@muskanshaikh6477]

Thank you soo much for this vedio

[@YahooBaba]

Most welcome 😊

[@kishorisahoo6088]

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

[@YahooBaba]

It's my pleasure

[@abhimanyu6534]

Amazing 👍👍👍👍

[@YahooBaba]

Thank you! Cheers!

[@biplobmondol4539]

Thank you bhaiya

[@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;
}

[@savitasahu3581]

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

[@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.

[@radhikaboro5966]

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

[@asmalatif8249]

Best

[@samarthkalshetti5008]

It's ease not easy

[@soumyaranjanpradhan1325]

Sir , your expalnation is amazing !!

[@YahooBaba]

Thanks a ton

[@AniketKumar-hy5zo]

very usefull thanks

[@md.sabbirhossain7348]

world class tutorial ❤️❤️

[@Abhishek-zu5bn]

Thank You Bhai

[@munamarziya2546]

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

[@YahooBaba]

You are so welcome!

[@fashionjewels299]

this is so cool

[@YahooBaba]

Thanks :)

[@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.

[@computingpulse9144]

Amazing !!!!

[@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

[@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;
}

[@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 😊

[@iamdanyaal]

Thank You Sir

[@YahooBaba]

Most welcome

[@zakieeverything.10]

bhai maza aa gya..

[@YahooBaba]

Thanks Zakie :)

[@priyapandey6061]

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

[@tiktoktube1552]

Bhai how to make search bar in html

[@khoj1349]

It's not easy ..... it's ease . So your transition not working :)

[@itsmeahmed5062]

💯😂

[@ankitkumaryadav562]

Animation and transition both are same or different??

[@Otakuvfx05]

Please make video on python from starting

[@YahooBaba]

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

[@manitarai2969]

sooooo good!

[@greatart1144]

Thanks

[@YahooBaba]

Welcome

[@MovieDakheEnglishShikhun]

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

[@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]

[@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.

[@engineerslab1664]

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

[@akashjajoriya8677]

sir last vala silde ka example ki property kya use aapne

[@YahooBaba]

?

[@sanjaybisht322]

Thank u sir...

[@haseebraza8787]

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

[@YahooBaba]

See this playlist for Image Hover Effects : ruclips.net/p/PL0b6OzIxLPbyq_At-YvkOo2E85-eZ_E1d

[@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 : ruclips.net/p/PL0b6OzIxLPbyq_At-YvkOo2E85-eZ_E1d

[@muhammadgulzaib7567]

@@YahooBaba thanks sir I got that very well

[@rathod1864]

🙏🙏🙏🙏♥️

[@abdulrehmantariq9047]

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

[@indalsingh6675]

Transition display par kaam karta hai kya

[@shaziamohdsajimshagufta65]

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

[@mohitpawar1062]

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

[@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

[@hishamakmal2149]

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

[@YahooBaba]

Here is a Hover effect playlist for that : ruclips.net/p/PL0b6OzIxLPbyq_At-YvkOo2E85-eZ_E1d

[@hishamakmal2149]

@@YahooBaba thanks a ton sir!

[@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 :
ruclips.net/p/PL0b6OzIxLPbyq_At-YvkOo2E85-eZ_E1d

[@aishikdalui_0734]

Than you so much sir❤💕

[@ahmad_raza_qazafi]

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 :
ruclips.net/p/PL0b6OzIxLPbyq_At-YvkOo2E85-eZ_E1d

[@ahmad_raza_qazafi]

@@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_qazafi]

@@YahooBaba Thanks a lot sir :)

[@achyutpal3865]

Sir, iss image pa jo transition keya ha wo kase kare, maine bohut try keya par hua nahe.

[@YahooBaba]

See this playlist for that : ruclips.net/p/PL0b6OzIxLPbyq_At-YvkOo2E85-eZ_E1d

[@achyutpal3865]

@@YahooBaba Thank you very much sir.
Maine ne socha tha sayad aap mera comment nahe dekhoga, per aap ne reply deya. Thank you Sir...
Sir aapka teaching style awesome ha.
Thank you very much. :-)

[@mdhasiburrahmannafiz9984]

❤❤❤❤

[@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 : ruclips.net/p/PL0b6OzIxLPbyq_At-YvkOo2E85-eZ_E1d

[@imshabi99]

me watching this video in 2022

[@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.

[@onlyhacker6821]

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

[@YahooBaba]

😀

[@technicalchandra4648]

Sir img slider ke uper bhi video bnao

[@YahooBaba]

Yes sure coming soon.

[@sewakramsahu9761]

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

[@Sahil-fh2oo]

Sir wo input wala smj ni aaya

[@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

[@saumyaverma701]

Ye IMG m kese ye transition use krege ?