CSS Tutorial: Creating Transitions in CSS | Web Development Tutorials #37
CSS Tutorial: Creating Transitions in CSS | Web Development Tutorials #37
► Source Code \u0026 Notes: https://codewithharry.com/videos/web-…
►This video is a part of this Complete Web Development in Hindi Course Playlist: • Web Development Tutorials For Beginne…
►Click here to subscribe - / @codewithharry \r
►Checkout my English channel here: / programmingwithharry \r
\r
Best Hindi Videos For Learning Programming:\r
\r
►Learn Python In One Video - • Python Tutorial In Hindi 🔥 \r
\r
►Python Complete Course In Hindi - • Python Tutorials For Absolute Beginne… \r
\r
►C Language Complete Course In Hindi - \r
• C Language Tutorials In Hindi \r
\r
►JavaScript Complete Course In Hindi - \r
• JavaScript Tutorials In Hindi \r
\r
►Learn JavaScript in One Video - • JavaScript Tutorial \r
\r
►Learn PHP In One Video - • Learn Php In One Video In Hindi - हिं… \r
\r
►Django Complete Course In Hindi - \r
• Python Django Tutorials In Hindi \r
\r
►Machine Learning Using Python - • Machine Learning Tutorials For Beginn… \r
\r
►Creating \u0026 Hosting A Website (Tech Blog) Using Python - • [Hindi] Web Development Using Flask a… \r
\r
►Advanced Python Tutorials - • Intermediate/Advanced python Tutorial… \r
\r
►Object Oriented Programming In Python - • Object Oriented Programming Tutorials… \r
\r
►Python Data Science and Big Data Tutorials - • Python Data Science and Big Data Tuto… \r
\r
Follow Me On Social Media\r
►Website (created using Flask) - http://www.codewithharry.com\r
►Facebook - https://www.facebook.com/CodeWithHarry\r
►Instagram - https://www.instagram.com/codewithharry/\r
►Personal Facebook A/c - https://www.facebook.com/geekyharis\r
Twitter - https://twitter.com/Haris_Is_Here
Content
0.267 -> Guys in previous video we have seen that how keyframes and animations are used
5.706 -> To make animations, in today's video we are going to see transitions
10.544 -> and quickly we'll see what are transitions and how it is used
14.281 -> if you haven't accessed this playlist so i'll say click here to bookmark it at this star
19.12 -> and click here to save the playlist so this playlist becomes yours
23.023 -> now here i'll tell you by creating a new file and i'll name it "tut37.html"
33.2 -> and here making editor bigger, quickly i'll add html boiler plate and i'll write here "CSS transitions"
43.644 -> once i wrote this, i'll add style tag and after adding style tag we'll create a basic body
51.352 -> so assume i write a heading here, "This is CSS transition tutorial
61.228 -> If i click on Golive so my page will become live as you can see
67.134 -> here you can see that i added 36 videos already in the playlist i created and this is 37th video
74.642 -> and here i save it
77.111 -> i'll do one thing here, i'll make "div.container"
81.015 -> i'll create a div, i'm giving id to a box, i'll give "id= "box" " because it is a box
87.721 -> and here i'll write "This is my box", and what i do to this box
94.562 -> i'll make this box a flex box, i'll make "display : flex;" now we talked about it
100.801 -> i'll do "justify-content: center;" and along with that "align-content: center;" okay
109.577 -> and here i'll give it a background too, height and width too, "height: 200px;", "width: 200px;"
121.655 -> and along with height and width, i'll give it a "background-color: red;"
128.329 -> So see here, This is my box came and it is center, vertically but is not in center
134.101 -> and reason for it let's see here, i have to make here "align-items: center;" because align-content corrects the spacing
142.443 -> anyways it should be center now, yes the text inside my box is center, very nice
149.416 -> Now see here what i'll do, i'll use transition for, first of all i'll write "transition-property"
158.826 -> this means which property i want to transition, assume i have to transition background-color okay
168.636 -> and i wrote background-color here, now what i'll say is whichever hovers over this box
175.743 -> then what will happen, make this "background-color: white" okay, so i'll write here
180.714 -> "background-color: white", along with this what i'll do, i can change another things too but for now i'm only making "background-color: white"
189.089 -> now what i'll do, i wrote transition- property background-color
192.393 -> so see here as i hover over it, it's background color became white, it is not showing, i'll change the color
198.098 -> i'll make it black, so at-least it can be seen, so see it became black okay, see this
204.171 -> or else i'll make the body white, sorry black
209.81 -> and here i'll make "background-color: black;", save, and as i hover over it, it became white
217.718 -> so like this i can do transition, now this transition is happening here
223.524 -> now what this transition means is all this colors passing through it has color changed to white okay
231.465 -> how this thing works, what i'll do here is put "transition-duration" if i made it 1sec
238.405 -> so to complete this transition it'll take 1sec, see this it took 1 seconds of time
243.777 -> from red to white, see how nice it is looking, now if i make this thing 2seconds, so it'll take 2seconds time for transition see this
252.82 -> it took 2sec of time, it took 2sec of time when i removed, like this
258.425 -> now we saw in animation that we had timing function, along with that we have timing function in transition also
266.934 -> and in it you can use ease-in, ease-out and ease-in-out
271.705 -> what happens in ease-in is at starting it'll be slow and after that becomes fast okay
278.245 -> like that ease-out will be opposite of this, fast in the beginning and then instantly slow, see ease-out
285.018 -> ease-out means when ending go slow, see this fast then slow, i'll increase it's time
291.158 -> if i make this 12 seconds, so see here at starting it is slow and at the end instantly it'll become white okay
301.068 -> became white see, so like this ease-in, ease-out and ease-in-out works
307.708 -> like that ease-in-out is there which will start slowly and slowly end
311.979 -> and this time 12 sec is quite big enough, i should make it 4 sec and see here it'll slowly start, slowly end and the middle part is fast
322.923 -> so like this you can use timing function, now there is a delay in transition like delay in animation
330.831 -> you can put it, assume i want to start my transition after 2 sec, so see it'll start after 2 seconds, i'll remove timing function
341.775 -> see here count to 2 seconds, then what happens is this transition will happen okay, so i think i kept the duration long, i'll make it 1 sec
352.853 -> here i'll open my browser, i hovered here so see after 4 seconds, i added delay of 2 seconds after this it worked
363.33 -> count 2sec, 1, 2, now it'll happen see it did, so we saw after 2 seconds it happened
370.47 -> now what we'll do here, we'll see a shorthand property related to transition like
376.844 -> if i write here transition, so i can add a shorthand property in which first i'll put which properties i have to transition
385.919 -> like here i can put background and after that i'll put background-color
391.391 -> after that i can give timing, that means duration which is called transition duration, i can give that
398.866 -> here assume i give 1sec, and after that the ease-in-out we wrote, i can write this after that, "ease-in-out"
411.645 -> and after that delay, assume i want to keep 3 seconds delay, so i can remove this and write all of this in 1 line, 1,2,3,4
419.653 -> 1,2,3,4, all the 4 properties in 1 line, so see here i took it away, so it'll way for 3seconds before transition okay
428.328 -> here instead of this 4 we wrote it in shorthand property so i'll write here, "Transition shorthand property in one line"
438.171 -> it is also called one liner, but you can say whatever you want, as long as you know how it works, you should be good okay
446.013 -> now if i want to transition many things at at time, i reduce the delay here, make .3 to 3, i don't want any delay to come
453.186 -> and ease-in-out is okay, now assume i have to transition all the properties, so what'll do here
459.493 -> i'll make it same here so that you people don't have any problem
463.997 -> so that you know this 2 sec is mapping with this 2 sec, ease-in-out is mapping with this, 1sec is mapping with this, background-color is mapping with this
470.337 -> now down here i will do anything
472.539 -> i can write all here, that means i can transition all the properties, now if i don't write all
477.744 -> assume i make it's "height: 400px" and make it's "width: 300px"
486.453 -> and assume i wish to transition this also, transition won't happen instantly it's height will be increased see
492.993 -> i reloaded it, see this increased instantly, transition didn't happen, only transition of color is happening
497.998 -> now here there are multiple properties which i want to transition, that's why i'll make here all
502.869 -> so all means transition all the properties, so here i can transition height, width and all
509.576 -> now if i come here see it's height and width are transitioning, now here i made 400 400, you can do 400 300 also, you can do anything
517.784 -> so see by doing 400 300 transition is happening like this, now assume i add border-radius here okay
527.961 -> if i add border radius so it will become round like this, so i'll make it 400 400 here
535.402 -> make border radius 100 and see, and i'll make this green because it'll look much better
542.075 -> and see transition happened from red to green like this, if i remove my mouse
546.546 -> so it came back, so if you want to produce effects like this using CSS so you can do it
551.685 -> and when this will grow you want to increase it's font size also, so if you want to increase it's font size
559.726 -> put 16px, save it, and see here as soon as i make it large
565.532 -> 16px is by default, make a little bigger, make it 25px, and see as i hover over it
571.738 -> see font size also increased, if you want you can increase it more, assume you have to make it 45
578.478 -> so you can make it 45, see i made it this big, and like this effects you can add it using CSS
584.985 -> now which properties can transition?, it is a very good question
588.989 -> that properties can transition who has continuous values like colors, colors can go from green to red, red to green
596.663 -> don't transition binary properties because you won't get transition effect in it
602.068 -> now assume you have to transition height, width, so you'll get it from smaller to bigger okay
609.876 -> it'll become a animation, so you can transition opacity, height, margin, font size all this things okay
619.352 -> so you try this things with different combinations and tell me in comments how you feel about the course so far
625.592 -> if you haven't accessed the playlist till now, so kindly click here to bookmark it and click here to save this playlist
633.867 -> I request you to like this video that will increase my courage to make more videos
641.041 -> That's all in this video for now guys, i'll put the whole source code in this description
646.546 -> Thank you soo much guys for watching this video
and I will see you next time [ ♬ ]
650.55 -> [ ♬ ]
Source: https://www.youtube.com/watch?v=k4Dr0PJKidI