CSS Transition (CSS Animations Series Part 1)

ah what's up everyone my name is Travis Nilson and this is dev tips a YouTube channel where we look at web design and development and today we're starting a new series called the what is called CSS animation series now the way this series breaks down is we're going to have two principal episodes and by principle I mean we're going to be talking about the the functionality syntax the ideas behind making this all work what are the principles involved in making the animations in CSS happen and then after that we're going to have a few episodes more practical episodes and in those episodes I'm going to go over like the things that you should be animating because there are some things that don't need to be animated that I see animated a lot and I want to go over and give you some good recommendations and show you practical examples of what and how and why you should be animating certain things and not other things but that will come later and I don't know how many of those will be it'll just be like a continue to do them until I'm bored of them kind of situation but this is the first of the two principled episodes but before we go into the how of CSS animation I want to go into the what am I talking about when I say CSS animation or animation on the web okay so animation kind of breaks down into these these two ideas the first idea is to just to give something life right you'd like dr. Frankenstein has this monster and gives it life he animates it right the second one is what we really want to be looking at today is to give something the appearance of having movement and the key here is is really movement okay so in CSS there are two main ways that we move things around the page the first one is what we're this video today is going to be covering it's the transition property this is the how we animate with CSS the first one is using the transition property the second one is by using the animation property and you have to couple that with the this other idea called keyframes and we're going to get into that in next week's video or the next video that I create but right now we're going to be looking at the transition property and then after both of these two like I mentioned early here we're gonna have a few videos that are planned and they're gonna be talking about you know the elements that you should be animating and we're going to take a little bit more of a UX stance on that what you should animate because it's good for the user and what you should not animate because it's ridiculous and dumb sound fun okay on to the first episode today we're going to be talking about the transition property and this is part one of the CSS animation series so let's let's first take a look at how it's written what's the syntax of transitions in CSS how do we write them let's break them down like this we declare this transition on an element and the element that we - the blue right there the element in this case that's a class called element the thing that we call this transition on will be the thing that's going to be transitioned or the thing that's going to move okay and how we write that is there's a few parameters there's a few values for the property of transition the first value of the property is the other property that's going to animate and that'll make make sense in a second the second one is duration how long is this transition happening and the third one there is he is I say ease because timing function didn't kind of fit in the line I wanted to keep it on one line but you can think of it as timing function or ease basically this is the how how is that transition distributed across time is it ease in out ease in you could even use things like cubic Bezier or steps with transition so it's pretty cool and then the last one is delay how long should this wait before the animation or in this case the transition starts happening okay you would write it out something like this here's an example of how this would be written transition opacity not and the first the green there is the property of the element that we're animating so if there's a bunch of element properties like height and width and color all those things will not get transitioned only opacity you could even write the keyword instead of writing opacity in green you could write all that means everything will get this same transition okay after transition you're right the orange which is time so transition the opacity over 300 milliseconds and use a timing function of ease in out but wait until after one second has passed before this transition starts does that make sense this is this is the formula for how we're going to write transitions this is the syntax and you can actually add more than one transitions onto any given element if you just wear that semicolon is right there just change that for a comma and then repeat the green orange pink and blue and then end with the semicolon right so you can have you can transition different properties so like if this is a pay city and we wanted to also and transition the background color you would write this again but the green would say background color right I hope that explains itself so that is the syntax of CSS transitions and you notice that in this example opacity is the property so let's talk about properties what can we animate and what can we not animate because there are some things that just don't make sense to be animated right or they're just not even able to be animated so animatable properties okay things like font size background color I have listed here width and like left which is how far from the left something is positioned these things would make sense obviously if you change the value of these properties that some kind of visual change would happen if you if you change the font size from 14 pixels to 28 pixels you can see that there's going to be an animation that happens there there there's there is distinct traversal of the values that can happen width from 28 pixels to 100 pixels wide you could see that thing growing all right background color you can see the color changing those things are animatable properties and this list of four is not all of them there's like you know actually there is a list of all of them and I'll link to that in the description below but basically you just think of it as anything that you can imagine changing you can most likely animate it okay here are some things you cannot animate just just as an example to help you understand the difference right so we have display can you imagine something visually changing from display:block inline-block what would that look like right can you imagine visually something changing position relative to absolute you could see that there's a difference in the way it will display but how would you transition from from relative to absolute you can't do that right you can't you can't animate the font family from Helvetica to - I was going to say Arial but you kind of can do that now Helvetica Helvetica - you know Georgia or something you can't like animate the characters it just it just doesn't work you have to switch them out there's no animation that can happen there right so a lot of properties are animatable and some are not and that's just what I want to explain here now when you're considering animatable properties you have to consider what animate what properties are the best properties to animate in other words performance or I have to consider performance because animation takes a lot of work to do we're moving things around on the screen we're making things go whiz and bang and are we animating the right thing right and some and there's there's going to be a some links down below some references that you can read on why some things are better than others to animate but here's here's the general rule okay the most performant things to animate our position scale rotation and opacity notice those first ones their position scale and rotation those are all in the transform you know property so it's kind of just like transform and opacity you so you would say like we're position I'm not talking about position left I'm talking about translate right translate this X&Y so these four things are the most performant things to translate and I have a quote right here from Paul Lewis and Irish who wrote an article together on html5 rocks comm and they're talking about these four properties and the quote says here if you animate anything else other than these four it's at your own risk and the chances are that you're not going to have that silky smooth 60 frames per sec animation and that's what we were talking about in when we're talking about performance like the most performant things to animate our you know transforms and opacity other than that you might dip below sixty frames per second and there's a lot of reasons for that an article is very good so I recommend you go read that there is a link in the description and just to summarize that these things do not cause a repaint of the elements and they do not also cause a reflow of the layout which are very costly in terms of browser rendering these things transform and opacity will just basically change the element they're targeting on which is a lot more proficient in terms of in terms of browser performance okay so now that we have that out of the way we know we know how to transform something and we know what we should be transforming let's talk about triggering how do you do you trigger a transform in other words how do you make one happen okay it's not that hard there's a lot of different ways but the main two that you want to cover is by having the hover pseudo-class you hover over something and it it transitions and you know that could be either itself or a child of itself and I'll show you how that works this the second one is a class change so something has is a normal element and then you switch a class but that class has the command or the style of it to transform translate transition so that all these trends transfer point transition it so the news the new class has the style of transition on it and I'll just kind of like move it around based on the new class and when you take that class off it moves back right so this is what this is a great way to do a few things like menus or dropdowns and things like that we'll talk about those in a second that's it that's all the talking that we're going to be doing now let's jump into some code and you know roll up your sleeves and get Cody here we are in the code and it's a very very simple code just to start out with we have the famous pink box the pink box that we learned almost everything on I love a pink box for some reason um okay and we're using Jade which translates to HTML so you see like I've clicked the view compiled it's actually just a div with a class of box but I just get a write box because I like Jade and if you like Jade or you don't know what Jade is check out the you know do you even Jade bro video and understand what the heck that is and then for our CSS we're using sass it compiles down to normal CSS so if you don't like Jade if you don't like sass that's okay normal HTML and CSS works for all of this stuff and this is a code pen so you can visit the visit this code pen later I'll have a link for that code pen in the description and just like you compiled so you can understand the HTML and CSS if you have a problem with that but I don't care enough to do it for you just saying so we have a pink box here we have one HTML element called box we have a body which has 50% there are 50 pixels of padding and I don't know why we have a font color on that body and then we have a box which is an inline block background pink and a height and width of 200 pixels super basic okay now what we going to do is we're going to transform this box so transform and we'll just say translate translate means move let's say translate it 200 pixels that way and then 150 pixels that ways so we're moving it to the right and down and that's that's all fair let's rotate it a little bit let's rotate it like 20 degrees okay now we see that we've just moved it and moved it down but there was no transition it's just just it just snapped right where it should be right so let's talk about this transition property will write the transition let's get rid of our JavaScript move this up here and so to transition them to get that to animate down we have to write a transition and what do we want this transition to be remembering back to our syntax will say transform is the property that we want to transition and how long should it take let's say 300 milliseconds which is just a good Goodspeed for your eyes to understand what's happening and what's the next one the the timing function let's use the classic ease in out one of my favorites it's easy to do and it looks good and then the delay we only don't want to put a delay on there okay so I've saved it what has happened nothing has happened why is nothing happened well because the the origination of the of the animation is never like it's already there right so one way that you can really easily understand how something will transition is take that take the property that we're trying to transition and just quickly comment it out now we can see that there's some movement happening right pop-up okay so now there's no transform declared so all of those you know values of transformed the translate and the rotate are kind of zeroed out but when we quickly add them the transition will say oh I'm looking at transform let's do this let's take let's take 300 milliseconds and ease it in a certain way for that transition to happen right pretty simple the next step to understand and use these things is to realize that the the user is not going to be editing your CSS we can't expect them to come in here and comment and uncomment your code right so what we're going to do is we're going to take this and and put the responsibility of triggering off into a hover so box let's say box hover there you go that's how you write that and then in the hover we want to put this transform LX cut that and paste that here okay so notice that the transition is always on the box I you get this confused when I first started like where do I put the transition on the hover because I want it to hover no no you put the destination of the style on the hover and the transition is always on the Box looking for a change in this property when that when the hover happens it says oh here's a change in this property let's do it over time which is that right did you get all that okay so let's hover over this and we'll see that this transform will happen when we hover BAM see that all right you see this little jittering here that's a problem because what's what's happening is that our target in other words the box with the pseudo selector of hover is that is the target and it is actually moving around so this makes it pretty hard and if you hurt like you know well I mean imagine that you're a user you're trying to hover over the pink box and it's like flying around you're like wait wait like it's follow down here okay follow what so what we're going to do to combat this problem is actually offload the hover onto another element so let me show you what I mean I'm going to go up here and say trigger this is going to be my triggering element I'm going to put box as a child in that so let me show you how that renders the box is a child of trigger all right and then I'm going to go in here let's style the trigger up a little bit trigger it'll be the same size with 200 pixels height 200 pixels border 20 pixels solid and we'll say 99 and then background is going to be a goal DDD okay we have this trigger element that's around the box element and I'm going to offload this hovers right now it's still hovering in the box until of this this this jittery problem I'm going to offload the hover to trigger and I'm not going to transform trigger right I'm not going to do that that's not what I want to still the same problem look legit ring what I'm going to do is I'm going to say when trigger is hovered then take box the child of trigger and transform that like that now it's really clear that this is the trigger and then the box over here is the child that's being animated and one interesting effect of this is that if you hover over a box we're going to have obviously I'm sorry if you hover over trigger obviously we have it triggering but if you hover over box as well which is a child of trigger it's still triggered so one way to overcome that is you could say go to box here and say um what is it it's pointer events none now what pointer events does is it says don't register any hovers or clicks on this element it's just an element that you cannot interact with you can just see it so when I hover over the trigger obviously it's it's moving but when I move that hover onto the box it doesn't recognize any hovers or clicks on it so when we're going up there this this guy right here pointer events is super helpful when you're using um like JavaScript or something later when you need to interact with things and make sure some things don't trigger something so remember pointer events it's a big one when I'm going to realize what that thing was when I learned pointer events I was like ah this is amazing why don't people talk about this thing more it's kind of like this we don't talk about it but it's so powerful all right anyway pointer events none so that's hovering that's the first part of this practical exercise that's what we're going to show you there what I want to do now is show you how to do this same thing but with with classes okay so I'm going to pull up some JavaScript here and I'm going to say okay I'm going to target the trigger and use on click so when I click it something's going to happen the thing that's going to happen is this o is this function okay so this function here we're going to say grab the trigger that you that you found or the thing you clicked on which is well we use the keyword of this and just say just say you know toggle a class toggle class of anything clicked and so you know taro class means that if clicked is on it then remove it if it's not there put it on so when you when you click on the trigger it'll get a class of clicked so instead of saying trigger hover we want to say trigger with a class of clicked is what we're going to do so let's click E and it moves now this will stay when we're moving around which is the nice thing of having JavaScript add classes you don't need to rely on a hover and you can click it and it'll go back right because we're just toggling that class and that class of clicked is what triggers this transform right that's that's what says we need to we needed to be having a different type of transform and because there's a transition already on it looking at for transform changes it will do a change got it so one thing I want to show you more just is kind of like a little bonus and this is not necessarily related to how you trigger an animation but it is fun to think about this box here has obviously this animation on it and the the timing function is ease in out and this will work for anything that you use timing functions on but chrome has this really great pop-up window that kind of shows you the thing over time you see where this animation is more dense over here and sparser in the middle and more dense that's because this curve here shows you over time that we're spending more time and then we're going up quickly and spending more time at the end that's why it's like a softer transition right you can have different different things where it's more dense in the beginning so we softened and have a hard ending right there's a lot of different kind of curves that you can use and they all have keywords right in quadratic out sign things like that you can also take these little hand handles and move them around yourself which is cool so like see how it gets like a little pause in the middle mmm something like this OOP there's like a little stutter I wouldn't recommend that one but you put at the point is you can design these uh these um these timing curves yourself these are called a cubic Bezier in this code it's given right here is actually something you can copy and paste into your own code I'm going to make this custom cubic busy a a little a little more bouncy and if I take this top point and move it over we'll see how its 1.97 if it's over one that means it's outside of the box that's why it's kind of like clipping here in the in the display but what that does is it gives us this really kind of bouncy so let me I'm going to copy that take it back over to my code and replace the ease in out with this bouncy cubic Bezier let's move it over so you can see the whole thing in line okay close and see how it bounces bonk bonk bonk that's because my cubic Bezier is doing that I'm not putting like you know I'm not doing anything special other than saying like make your busy a whale weird curve in this 1.97 will make it go like over overshoot where it should be so you can use cubic Bezier to give your animations these weird like you know flourishes or like kind of a life that that it would not otherwise have it have if you were using a keyword and also I can't remember where I heard this but I believe that a cubic Bezier is more performant than using a keyword like ease in or easing out or is easy in sine or something like that right so that's all I wanted to show you with actually one more thing one more thing triggering is important because you need to realize how to enact your Trent your animations so I want to show you one thing one more thing that that you might think would work but does not work with the transition property okay so let's go back and put this transform in box okay so we already seen that the only way now to get it to transform is to is to remove the property but from the CSS and not I'm going to remove box from the trigger element and then in here I'll say not this not toggle the class but append append a div with a class of box okay so what this is doing i'm using javascript to insert an element in the document inside of trigger with the class of box now question what do you think will happen do you think that the pink box will show up where it should be in then animate to where you would like it to be or do you think it would just show up in the ending State well let's do a little click and figure it out it ended in the ending State now it shouldn't be all that surprising because we already have the transform already declared a transition happens when there's a change in something so when the box shows up and it just is already transformed if there's no change so you can do this a few times there's all these these boxes that got added to your document object but they don't get an animation now this is this is the reason I'm bringing this up I mean you're going to be like duh Travis why would you even brings up the reason I'm bringing this up is because there is a difference between transition which we're looking at in this video in animation the CSS property which we're looking at in next week's video okay so next week tune in and I'm looking at the animation property and it's going to be part two of the CSS animation series okay and then it just made it away but but but but this is dev tips the web B what is a YouTube channel thank you for watching this video on CSS animation I'm really excited to share the rest of the series with you soon now these videos are available to you because of the good work and the support that we get from the patrons of the community now these people have visited patreon.com slash dev tips and made a donation of any amount of their choosing and there are different you know rewards and benefits but mostly what you're doing right there is you're supporting the community because these tutorials that I make are all for free and people who could make a use of them to further their career benefit their life generate extra income or even income at all I get a lot of emails from people saying that like these dev tips have helped to nail the job right land a new job get a new client or whatever it is and those emails really like make me excited to do this work for you and free all you guys who are watching and so if you want to contribute not just to the channel and say hey thanks Travel I believe in what you're doing but if you want to support the people who benefit from this channel go ahead and visit dev - oh sorry go visit patreon.com slash dev tips and there's there's a whole community of their other perks and stuff seeing the videos early dev tips chat monthly hangouts or semi monthly incomes and it's a really exciting place to be free podcast other things to see you over at patreon.com slash dev tips and I'll keep on hacking and we'll see you next week when we're doing CSS animation property to learn more about CSS animations thanks everyone

Channel: DevTips

Views: 518,641

Keywords: HTML, CSS, Javascript, Web Development, Coding, Design, Dev Tips, Web Design, Website, Web, Internet, Internet code, Tips, How To, tutorial, web design tuts, net tuts, web tuts, coding tutorial, advice, development advice, friendly internet, programming, programming help, html, css, javascript, workflow, code editing, design, graphic design, graphic designer, designer who codes, designers who code, design prototyping, CSS Animation

Id: 8kK-cA99SA0

Length: 27min 28sec (1648 seconds)

Published: Mon Jul 04 2016

Reddit Comments

[u/kmcg103]

I used to suffer thru transitions until I started using Greensock tween lite. Any reason to use Transitions over Greensock?

[u/jackpaxx]

Thank you for the video, I've been learning about web design in my free time over the past ~10 years but have only recently started considering it as a career once I declared Computer Science as my major in 2014 I'm just now messing around with creating websites and experimenting more with CSS and found this very helpful.

I do have a question that's pretty irrelevant to the subject of the video but I figured I'll ask this anyways since I saw it in the video. I noticed that you didn't use a semicolon at the end of each line, are semicolons at the end of a line unnecessary when it comes down to CSS? I thought they were required to be at the end of each statement but after seeing this video it seems like this isn't the case.