Hello, in this CSS Crash Course video, we're going to be looking at transitions. So when we do something like hover over an element, and then we affect it like we could change the font size. In this video, we're going to hover over a div that will create the moment, we will change the font boys, which changes color, but that will you just happen immediately, there will be no transition. And usually having some sort of transition, which looks like an animation just makes it feel more interactive. If makes me feel more warm, more confident, it just provides a better experience to you to instead of abruptly changing, especially when there's a lot of animation going on which a lot of websites do have animation going on with the hover states, changing the font size, the color, even background images, that sort of stuff. So we're going to do is first create a div.
As usual. Don't do an A to a div, I'm sure you'll be able to adapt these skills to classes, IDs activity. selectors, that sort of stuff in CSS. So in here, I'm gonna put let's do some hover and save that. Let's go to our web page refresh. So that's what we've got at the moment doesn't do anything, but go to the index dot CSS file.
And I'm going to put diff cola harbor. So when we hover over it, we're going to change the font size to 2pm. We're going to change the color to red. So if we save that refresh, if we hover over it, it immediately changes, locks that is quite abrupt, basically, when the font size changes and it changes quite drastically. To add a transition is very simple. You just put transition, colon, fine to dash sois two F and the two f ing you can Guess what that means?
It just means two seconds. So what it's saying is the font size change, do we over two seconds per comma, then next attribute, or property that you want to transition. So this is going to be color no one, so you don't have to pre transition to every single different change. So to you, before refresh, go over it. As you can see, it looks a lot nicer, which is really cool. So if you have any questions regarding transitions, or anything CSS web development related, feel free to post them on my education platform, summer learning Dakota, UK or communicate with me, however you see fit.
All of the source code from this video and every other video in this series will be on the GitHub page, which there'll be a resource link. And as usual, thanks for watching, and I hope you have a great day.