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