This course has been updated! We now recommend you take the CSS Animations and Transitions course.
Transcript from the "CSS Transitions" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Rachel Nabors: So you may have noticed that we have a lot of illustrations happening. Back in the day I was a cartoonist. Before I was a front end developer or anywhere near web development. I built websites to help promote my comics and they were read by 400,000 teenage girls all across the world every week and it was pretty awesome.
[00:00:25] It was sometime after web development, that I learned that my cartooning skills had a really useful application and they were good for storyboarding, interactive designs, and also for illustrating talks. My illustrations are so much cooler than clip art. And also they let me do things like bring back this little guy.
[00:00:43] He was my co-star back in the days when I had comics, his name was Tuna. He's based on my actual cat who has long since departed this world but I swore to immortalize him forever in pop culture. Now that I don't make comics. He is my little teacher's assistant, and will be the subject of many of our experiments I mean, coding examples today.
[00:01:04] Not that we're going to cause him any trouble.
>> Rachel Nabors: So let's get started on the big bad CSS transitions.
>> Rachel Nabors: It is not a good day to have an itchy nose. You're going to have to watch me rubbing my nose a lot. All right, so a transition, a CSS transition specifically to describes how CSS property should display change when it gets a different value.
[00:01:35] So you can think of this is like you change the color. How long should that change take? Should it go from fast to slow or slow to fast. Should it kind of a chunk up in between like turn to various shades of another color while it's going to its next color.
[00:01:53] Transitions are all about going from one values to another. And this is how you write that. You need two ingredients, you need the property that you're changing and you need its duration. These are not optional. You cannot write a transition without these two values but there are a bunch of other optional things we can give it.
[00:02:15] Let me demonstrate for you how these work. Come on mousey, there we are. Papa.
>> Rachel Nabors: So this is CodePen. This also serves as my on boarding chance for you in CodePen. When you go to CodePen you can, if it's not already in the editor view. You can go to Change View.
[00:02:43] And then click Editor View.
>> Rachel Nabors: And it will give you access to these three panes. And you can double-click on the top bar of any one of them to bring it into focus. And you can use Fork to make sure that you keep a copy with your account if you would like to hang onto it for future reference.
[00:03:05] So here we've got a ball div and we've got an image. The image is the little paw, and we are going to edit its CSS. Cuz we're not, we don't have a lot that we can do with the, a lot that we can do with the HTML. So what's happening here, if you want to refresh it you can just hit Enter or Tab, just anything and it will reload the page automatically.
[00:03:30] So as you can see what's happening, every time I change it, we're reloading and that paw is scooting across the page. Now you'll notice that the paw originally has a transition on it. It's got a transition and the transitions' property is the transform and it takes 0.25 seconds to run.
[00:03:52] Now beneath that you'll see the playing-paw scope here. That changes the paw's transform and so that it scoots it over by about 30 pixels. Watch what happens when I remove the transition.
>> Rachel Nabors: I said watch what happens when I remove, it jumps. It doesn't do it slowly it just jumps right over and if you're wondering where that playing class is coming from, we've got a load.
[00:04:23] We've got a load event that's attaching a class of playing to the body. That's very important because without this change happening,
>> Rachel Nabors: The paw never moves. So you can see that we needed that class to trigger the change that the animation runs on, the CSS transfer transition runs on.
[00:04:46] All right.
>> Rachel Nabors: This is how you write that in the long form. We have transition-property: color; transition-duration: 2 seconds. It gets a little wordy, but some people especially when they start out like to write these things out very specifically. This makes a lot of sense if you're just writing one transition or two transitions.
[00:05:09] Let's take a closer look at some of these, some of these properties. So, transition-property, that's the property you want to transition. I should make a point of saying, that only some things are transitionable. There is a whole list of things that are transitionable and the URL is provided on the screen.
[00:05:26] But not everything is and if you are transitioning something and you're wondering, why can't I get this to animate or transition. Why I want to do what I'm asking it to do. You might wanna check this list. I stayed up very late once trying to get a radio gradient to animate and it turns out that linear gradients can be animated.
[00:05:42] Radial gradients cannot be animated and I should have checked this list a lot sooner than I did. So don't beat your head against the wall, check the list. Transition duration. Now transition duration can take either a seconds or milliseconds value. You;re gonna see a lot of seconds written in these examples but I have found from working with companies that.
[00:06:05] Milliseconds are actually a lot more robust to use in production code. Partly this is because JavaScript takes millisecond values, so if you should ever need to write something that parses your CSS for timing values, it's a lot easier to look for milliseconds. You don't have to run conversions on them.
[00:06:23] And also most of the things that you are going to be animating are going to take less than a second to run. So instead of littering your CSS with decimal points, sometimes it just makes more sense to use whole values. Transition timing function. My gosh it's so long.
[00:06:41] I wish it were just easing but it is transition timing function. However, the cushioning for the transition, it is optional, it has a default values of ease. Will talk a bit more about timing functions, i promise they are a vast scoped concept. And then there's transition delay, or the number of milliseconds or seconds you want to delay the transition before firing it, also optional.
[00:07:08] Defaults to zero so transitions run immediately. [COUGH] So how do transitions and their durations and delays look when you write them out in the short hand? How does the browser know, how do you know specifically, which one of these is the duration and which one of these is the delay?
[00:07:28] Well, one of them is optional. So the browser assumes the first one it runs into is the mandatory duration. Thus the second one must be the delay.