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.
Пікірлер: 210
Bhai keep it up good content quality
Bahut bahut dhanyawaad sir 🙏🙏🌹🌹 you clear my all doubts of transition.
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
Thanks for making such a easy tutorial...
Thank you Soo much sir for putting such a efforts for us and sharing with us ♥️ always loved and enjoyed your video's
Teachers take 2.5 hours for explaining transition 😁 Yahoo baba 25 min 😘
@Timed-Automaton
Жыл бұрын
Correct, Yahoo Baba the best.
I like the way of your explaination... 👍👍👍
apne jo shoru me img ke sath transition lagai uska code milega ?
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
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
3 жыл бұрын
Your welcome Gagandeep. I know the 'easy' mistake but can't correct it
sir, here just apply one property but how to apply more than one transition property ?
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
3 жыл бұрын
Thanks Naeem for appreciating my work.
sir how many ways to use transition without hover in css?Can we use transition without hover in css?
Thank you for this awesome video.
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; }
you save my web development exam ...keep it up keep growing
@YahooBaba
2 ай бұрын
Thanks and welcome :)
Very good tutorial....
Transition display par kaam karta hai kya
Ty so much sir...aapke videos se bahut help hoti h mujhe...
@YahooBaba
4 жыл бұрын
Your welcome Poonam :)
sir mery smoothness nai aa rahi tansition main.....aur na hi steps wala code run ho raha hai help me????
sir, I am writing from Bangladesh. This is the most favorite tutorial CSS.Thanks for the free give.
@YahooBaba
4 жыл бұрын
Your welcome Ashik :)
@ashikkhandokar7564
4 жыл бұрын
Thanks for reply, sir.
@dream_boy_
4 жыл бұрын
@@YahooBaba I do coding if you want you can watch my video I hope you like it 😍😍😍😍😍
@dream_boy_
4 жыл бұрын
@@ashikkhandokar7564 I do coding if you want you can watch my video I hope you like it 😍😍😍😍😍
Sir practical to samj aa gaya lekin hume transitions ko define karna ho to kaise define karenge ..
Animation and transition both are same or different??
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
3 жыл бұрын
You are welcome
world class tutorial ❤️❤️
Ye IMG m kese ye transition use krege ?
Thanx for the information!
thanku for making such a good lecture on transition aache se smjh me aagya hai sir
@YahooBaba
4 жыл бұрын
Your welcome :)
Thanx a lot bro awesome video!!! excellent explanation. Pls keep making more videos . Subscribed !! ☺️
@YahooBaba
3 жыл бұрын
Thanks and welcome
sir last wala transation kese kia ....upar se yahoo baba slide hokar aara
awesome sir
Yahoo baba rocks. Thanks so much sir for making these tutorials.
@YahooBaba
3 жыл бұрын
Your welcome :)
Awesome explanation sir ji😉❤️👌👌
@YahooBaba
3 жыл бұрын
Thanks for liking
I m not able to use multiple property in vs ... For single property its working bt for multiple its not working
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
7 күн бұрын
sure
Great video sir....mazza aaa gya...css like Nasha...it's makes me nashedi😅😅
very nice video sir ji.thanks a lot 🤩🤩
@YahooBaba
Жыл бұрын
Most welcome
Making Great Content :)
@YahooBaba
5 жыл бұрын
Thanks Abdul :)
Amazing !!!!
Bhai ye cubic-bezier me 4 se jyada accept kyo nahi kar raha
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
4 жыл бұрын
I already make a course on JS. Please follow this link to see our all courses : kzread.info/dron/uT0rj__qEq_ZO3kYwun4Qg.htmlplaylists
@saumyaverma701
3 жыл бұрын
If u understand properly can you plz tell me that image tradition which shown in starting or the video ??
Thank you so much and love from Bangladesh💝💝💝
@YahooBaba
9 ай бұрын
You are most welcome
You are great you teach in full depth
@YahooBaba
3 жыл бұрын
Glad you think so!
very usefull thanks
I love your teaching style man 🔥 🔥
@YahooBaba
Жыл бұрын
Glad you enjoy it!
Your videos nice
I like ur videos
Sir , your expalnation is amazing !!
@YahooBaba
4 жыл бұрын
Thanks a ton
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
2 жыл бұрын
not rely on one content,there is much more to explore,keep it up.
sir last vala silde ka example ki property kya use aapne
@YahooBaba
4 ай бұрын
?
sir start m pic pr transition lgai thi us kis trha apply ho gi ?
@YahooBaba
3 жыл бұрын
See this playlist for Image Hover Effects : kzread.info/head/PL0b6OzIxLPbyq_At-YvkOo2E85-eZ_E1d
Thanks sir . ...well done ...well explained
@YahooBaba
4 жыл бұрын
Thanks for liking
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
4 жыл бұрын
Hover effects ke kuch videos maine banaye hai as a example : kzread.info/head/PL0b6OzIxLPbyq_At-YvkOo2E85-eZ_E1d
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
10 ай бұрын
show me your code
sooooo good!
Thank you so much. I learned a lot from you 😊
@YahooBaba
2 жыл бұрын
You are so welcome!
Thank You Bhai
Thank you so much sir for your effort for making this video 😊
@YahooBaba
2 жыл бұрын
It's my pleasure
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
4 жыл бұрын
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; }
Thank u sir...
Much well explained 👍 👍 👍
@YahooBaba
3 жыл бұрын
Thanks for liking
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
3 жыл бұрын
.gg:hover{ Background-color:black ; Transition:5s; }
Anyone ? Ye image par jo transition lagya hai us par color or text a jata hai hover par ye kesy ho ga ?
@YahooBaba
3 жыл бұрын
See this playlist for Hover effects : kzread.info/head/PL0b6OzIxLPbyq_At-YvkOo2E85-eZ_E1d
Sir jee app vs code use ke jiye bahut madad ho jayenge aapke upar se free bhi hai :)
Sir,how did you get that transition of transparent div on the image?
@YahooBaba
2 жыл бұрын
Here is a Hover effect playlist for that : kzread.info/head/PL0b6OzIxLPbyq_At-YvkOo2E85-eZ_E1d
@hishamakmal2149
2 жыл бұрын
@@YahooBaba thanks a ton sir!
Thank you soo much for this vedio
@YahooBaba
2 жыл бұрын
Most welcome 😊
Sir why this not working in vs
Thank you bhaiya
best sir
Wonder full keep it up
@YahooBaba
4 жыл бұрын
Thank you so much
Thanks sir
Bhai how to make search bar in html
sir is it compulsory to use transiton-porperty while applying the transition because it also working without the transiton-property
@YahooBaba
2 жыл бұрын
How ?
@ashusengar1893
2 жыл бұрын
@@YahooBaba I don't know I tried it and it was working without applying transition-property value
@YahooBaba
2 жыл бұрын
Can u send me the code file at my email : hello@yahoobaba.net
Sir wo input wala smj ni aaya
Sir transition aur animation mei kya difference hai ?
@YahooBaba
4 жыл бұрын
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.
Sir, iss image pa jo transition keya ha wo kase kare, maine bohut try keya par hua nahe.
@YahooBaba
4 жыл бұрын
See this playlist for that : kzread.info/head/PL0b6OzIxLPbyq_At-YvkOo2E85-eZ_E1d
@achyutpal3865
4 жыл бұрын
@@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. :-)
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
3 жыл бұрын
Here is a full playlist of Image Hover Effect : kzread.info/head/PL0b6OzIxLPbyq_At-YvkOo2E85-eZ_E1d
@aishikdalui_0734
3 жыл бұрын
Than you so much sir❤💕
bhai maza aa gya..
@YahooBaba
4 жыл бұрын
Thanks Zakie :)
12:17-13:07 sir apne "ease" ki jaga "easy" likha hai koi bhi transition perform nai hoi
@YahooBaba
4 жыл бұрын
Yes know..... thanks for comment.
❤❤❤❤
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 : kzread.info/head/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 :)
sir aapne vo 1:14 par kaise kiya plzz tell sir
@YahooBaba
4 жыл бұрын
Hello pratik , aap meri ye playlist dekhiye : kzread.info/head/PL0b6OzIxLPbyq_At-YvkOo2E85-eZ_E1d
Are ease and ease-in-out both same?????
@YahooBaba
3 жыл бұрын
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
3 жыл бұрын
@@YahooBaba ok sir thanks
Best
Sir animation start hoga but mhuje and end mein delay chaiye kaise hoga.text animation
@YahooBaba
5 жыл бұрын
Just increase the transition-duration
@19861000dinesh
5 жыл бұрын
@@YahooBaba contact no
Sir continuous chalte rhe web page pe wo kaise krte hai???
@YahooBaba
5 жыл бұрын
Wo CSS ki (Animation) Property hoti hai.... isi playlist mein uska bhi video hai.
@ankitkumaryadav562
5 жыл бұрын
@@YahooBaba thanku sir. Thanks for reply
Amazing 👍👍👍👍
@YahooBaba
3 жыл бұрын
Thank you! Cheers!
Sir vo ease in hai easy nahi sorry to judge but lekin code run nhi karega
@YahooBaba
5 жыл бұрын
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.
App ne last div kese bnana tha wo to btaya hi nhi, jis me div a rha tha upper se
@YahooBaba
3 жыл бұрын
Wo advance topic hai jo maine alag se bataya hua hai. See this playlist for that : kzread.info/head/PL0b6OzIxLPbyq_At-YvkOo2E85-eZ_E1d
@muhammadgulzaib7567
3 жыл бұрын
@@YahooBaba thanks sir I got that very well
It's ease not easy
Sir same coding ki hai but work nh kar raha
@YahooBaba
2 жыл бұрын
Show ur code, I will check it.
Thank You Sir
@YahooBaba
2 жыл бұрын
Most welcome
this is so cool
@YahooBaba
3 жыл бұрын
Thanks :)
Thank you..yahoo Baba...☺☺
@YahooBaba
4 жыл бұрын
Always welcome
@anjumanararumela5969
4 жыл бұрын
@@YahooBaba Thank you ..and most welcome..Yahoo Baba...
It's not easy ..... it's ease . So your transition not working :)
@itsmeahmed5062
6 ай бұрын
💯😂
🙏🙏🙏🙏♥️
Sir, Yahoo baba ke name channel hai aapka too aapko browser bhi Yahoo hi use karna chaiye.😊😊
@YahooBaba
Жыл бұрын
😀
Please make video on python from starting
@YahooBaba
4 жыл бұрын
I have to make Python series ....let see when it will happen.
Thanks
@YahooBaba
4 жыл бұрын
Welcome
Sir img slider ke uper bhi video bnao
@YahooBaba
4 жыл бұрын
Yes sure coming soon.