Chào mừng bạn đến với TUTUAPP

CSS Animation & Keyframes

you might be aware of we are doing a series called CSS animations I really think you should check out if you haven’t the the episode that we did last week on CSS transitions which is the first episode in this series and we talked about that a broader sense what our animations and what our transitions how do you trigger them and a whole bunch of good stuff that give a lot of context for what we’ll be doing today we talked about the properties that you can animate and what are the best properties to animate to get the best performance out of your browser so you really want to check those out those were last week and if you have already then this is this is the party you should be joining us let’s do this okay so as I said there’s two main episodes last week was transitions and then this is the episode we’re going to be doing today about CSS animation print property and then after this next week and for a few weeks after that we’re going to be going into something that I call elements you should animate and this is going to be a little bit more into the design style and UX of things like what are good ideas to animate and what should you stay away stay away from and also when should you be animating things right there sometimes are better than others during the users interaction flow okay enough of that we’re going to get in today’s content which is the animation property and in order to use the animation property we have to use something else called keyframes also so these kind of things work together and today is part 2 of the CSS animation series so let’s get started we’re going to talk about keyframes first cuz they’re a lot easier to understand then animation property animation property is a lot more fiddly and see a CSS keyframes are a little bit more like they make a lot more sense when you just just read them so here is the syntax for CSS keyframes it’s pretty simple now keep in mind that these do not have any selectors on them they’re not nested inside of anything they are on the root of the CSS page so you write at keyframes and then a name you can name it anything you want or you see right there in orange name it whatever you want and we’re going to use that name later on to call the selector okay so I’m just going to iterate this again these keyframes are not inside of a so at all if you wrote these keyframes out perfectly they would not make anything happen on their own that’s why the animation and keyframes are kind of a pair that work together but we’re just [ __ ] song focusing on keyframes right now nasty inside the keyframe declaration you have the opening paren and the closing print but inside those are two other declarations you have what are the actual keyframes right so in this case we’re looking at from and the twos those those in purple those say start here and end here and the green definition of styles are what is changing what should the initial state be like and then – how should they change what should it look like at the end and the keyframes the animation call will will transition those it’ll handle the in-between states or the tweening that happens between these states from into and here’s here’s an example of the code written out so our name would be my frames the from into and inside we’re going to have a high of 200 pixels and a background of orange and it animates to 400 pixels in the background turns pink that’s this animation right here so what we’re going to do right now is we’re going to jump into the keyframes and we’re gonna write out a few freezing in and I want to show you a few ideas that you can do with them and some of the nuances that are built into them that may not be super apparent but it’s pretty easy I think that you’re going to enjoy so let’s do let’s do some keyframes okay so this is a pretty simple setup we have one HTML element called box and we have a CSS body with a padding of 50 and then the box element has its inline block background pink width and height or 200 pixels positions relative and then I also have an animation style declared on the box okay now currently it’s doing nothing because there’s it’s calling an N it’s calling keyframes called my frames but there currently are none so we need to write that now later on when I go in to do animation I’m gonna I’m gonna like talk about everything that you’re seeing here and I’m going to delete it and write it out for you and with you so you can see how that’s generated but I need those things to enable you to see how these keyframes are working right okay so we’re going to say at keyframes and then I’m going to use the name that I’m called in the animation right here called my frames right so the keyframes are my frames and now we’ll write from to have the starting state and then let’s just say height is a good a good example to see this height is 200 pixels as it is and then the – we want it just to grow age height – maybe about let’s say 600 pixels okay so it’s growing 600 pixels and you notice that the when the animation is done when it’s grown all the way to 600 pixels it just resets because the animation is looping and we’ll talk about how to define the behaviors of the animation in a little bit but right now these keyframes are telling us what is happening and the animation call will tell us how it’s happening so one of the things you can do in this is put multiple um style declarations in here so for example I’m going to write background orange regular house Bell orange and the animation is starting at pink and animating down to orange right it’s pretty simple you can also do this instead of saying from and – you could say 0% to 100% and this is this the same as doing from in to but what this enables you to do is to add something else in there like let’s say here’s 30% and we’ll make the width 400 pixels I’ll see you there at 30% it’s growing a little bit wider as it’s an as its animating down now if I want that width to kind of stay out there I could write 100% right here right so notice that you can define 100% twice really which is an interesting thing you might not see that a lot but it’s possible you could even do let’s say 70% here so in this case I’m defining 100% before I’m defining 70% all right you see how see how 100% had does not have a height of 6600 so it’s shrinking back up before the animation resets right so there’s a lot of interesting things you can do there it’s pretty malleable but it makes um but but it makes a lot of a lot of sense when you kind of start digging into it and again all of these things I’m showing you today are just like how this works right and to really get a great understanding of how it works you’re going to have to crack open your browser and your editor and start messing with things and to really understand it and before we’re done with keyframes here one thing I wanted to show you is you can create kind of like a pause in the middle of the animation in certain ways so for example if I change this 100 to 70 in this back to 100 so the you can see that let make it simpler for you let me just make this simpler for you I’ll make this 400 I’ll make this height so it’s easier to see get rid of this background color stuff so what’s happening is you’re going to see what looks like the animation going to 400 pixels and then pausing and then working down to 600 pixels and that’s because from 30% to 70% I don’t have any changes going on and that’s one really quick way to do that right here and so instead of like controlling random elements right here you could also make it more in line and have it create like a little brick in the animation or a little pause so this is all one looping animation even though it looks like two animations are happening grow and then grow but it’s actually grow pause grow inside of one animation okay so that’s a little trick trick for you and next let’s go back to the code and learn about this guy learn about animation yeah so the animation property is pretty complicated and nuanced but it’s also pretty straightforward once you get the hang of the idea so here we are looking at the syntax keep in mind that the animation property is inside of the selector right it doesn’t hang outside like the keyframes do in fact that name which is the first value of the animation property that should match the keyframes perfectly exactly and this is how you tie the keyframes to the animation so the keyframes are what the animation does and the animation is how it’s done like like the speed the duration the timing function the delay how many times it does that’s the iteration count and all this stuff this is an example below of what it might look like written out and keep in mind that the animation property is a shorthand CSS property so all these things my frames two seconds is an out zero seconds infinite they all have meaning but you have to understand what you’re looking at it could look like just like a bunch of random garbage so so my recommendation is get get in the habit of understanding what each of these keywords are or with like each of these values represent but in the meantime there’s a longhand way to write them out and they’re a lot easier to read a lot easier for me to talk with you about them so let’s jump back into the code and I’ll show you exactly what I’m talking about so here we are where we left off in our code we have this animation right here and this is again that shorthand and we’re going to delete that and I have in my clipboard I’m just going to paste basically the same thing that the shorthand was doing but maybe a little bit more verbose so each of these prop H of these we have properties here was one of the you know is equates to one of the values that you saw in the shorthand so let me separate this out from the selector a little bit okay so animation name obviously is going to be my frames because our keyframes are called my frames and if we want this animation to work it has to be exact now we want this animation to last two seconds long so a lot of these are pretty pretty easy but some of them are a little bit tricky timing values or timing function these are going to be the same like transition that we saw last week so these you can use keywords like ease in linear ease in out sign these kind of things or you can even use cubic Bezier like we saw again last week in the transition episode now animation delay is interesting to understand because it means how long are we going to wait once this animation is triggered before the visuals start happening right and when you think about okay so the next one here is called iteration count and I’m going to circle back to delay and show the relationship there iteration count is a number should this should this animation happen twice you write the number two right here I have the keyword infinite which means that this animation will keep going forever now go back to the delay you might think that if I put a delay on it let’s say five seconds watch this animation sit here for five seconds and then start now what is your assumption do you think there’s going to be a five-second between each one we are wrong there is not so this delay only is attributed to how long do we wait before the animation starts if you want a delay between each iteration you have to build it into your keyframes kind of like we did here when we paused it at 400 so you might say 0-2 let’s say 20% and then there would be a delay in the beginning then then you know the next one this is riveting oh that five second threw me off of like away I thought we got rid of it okay so the five seconds is gone now iteration count infinite now here’s an interesting thing as well because let’s say we put our iteration count at three this means that this animation will happen three times and then it will stop one two three and then stop okay that makes sense now the animation Direction is pretty pretty closely tied to the iteration count okay so Direction means if you can think of a time line right with this is an animation so time line is which way is the playhead moving you can actually put this in Reverse so now the animation will shrink instead of grow because we’re doing this animation in Reverse and it will do it three times notice and now it’s done you can also put another keyword alternate and this one means that it will go forward backward and then forward again and then stop now you might have thinking like oh why didn’t it go back and forward three times but it didn’t because each way eat forward/reverse and forwarding and that’s three iterations if it could be be careful of that so if you wanted to go up and down three times you have to put six iterations because you know each one is two you know what I mean now let’s look at animation Phil mode this is this is a weird one so you’ll notice that every time this animation stops it goes back to where it started this animation film mode will control what the what the element looks like after it’s been animated right or stopped so if you put it’s a really weird keyword keyword um four words this keyword will say make it look like the last frame or make it look like the ending of the animation and then stop it so you notice how it went down it down up and down which is our three iteration count and then I said four words which means it stops and it looks like how it should at the end of the animation I usually do four words but you could use backwards or normal or inherit like you know you like other things there’s out the keywords there but four words makes the most sense to me like if I animate something to the right I want to stay to the right and the next thing is animation place date this could be running or pause duh so it’s paused at the top there because you know every time I write this new code it kind of refreshes that little browser thing in there but let me show you some JavaScript here and I will show you that it actually does not just reset it and stop it but it does pause it in the middle of the prog the progress of the animation so what are we talking about here turn box and we’re talking about on click function okay and inside of that click function will say the thing that we clicked on toggle class is paused all right so that’s our JavaScript and we need to make another class here and we’ll say and is paused and then in that class will put this animation play state paused and then let’s put the iteration count got an error here okay let’s put the iteration count to infinite so you can see okay so now when this refreshes okay it’s going to refresh and this animation is going up and down up and down the whole time but I have it so when I click on this box a class will be applied to it called is paused and if that’s true then the animation play state will be paused so it’s out in the middle and it’s paused I can toggle that off and it will finish the animation same so keep that in mind and that that you know it’s Java scripts you can put the trigger on anything right like right now I’m clicking on the box but there could be like a button over here that will stop animation over here you can do a lot of things with this so now let’s talk about triggering since we’re already doing it here with the paused why don’t we talk about I mean last time we showed you when we did transition I showed you how you can hover over something to enact an animation you can add or remove classes to get animations going or stopping right and then you can also do what I just did right now by using this this paused technique the other way to get an animation going is by introducing a new element that has the animation applied to it so if you go back to our classes it’s the third one right new elements that have animations already on them start getting animated and this is not how transitions work remember at the end the last video if you introduce a new element the transition on it it starts at the end of the transition it’s just like oh I’ve already been translate transitioned but this will do the whole animation in front of you okay let me show you how that works okay so I haven’t thought about this example yet let me do an iteration count of one and I’ll do I’ll do the keyframes not height but transform a scale from zero to is it like animating while I’m working on this zero to one and we’ll do the duration faster much faster 300 milliseconds maybe the ease in out is good delay zero good one mm-hmm-hmm nope for I wasn’t normal and fill mode forwards yeah that’s good and not is paused okay so when I click on let’s say body let’s just click on anything the body will get appended append a and a box which is our pink element that has it on there now let’s delete box and what I hope we see is click on the body and the word box shows up oh I was using a Jade inside of jQuery not possible div class equals box okay save that was a little fast oh I did 30 milliseconds so like wow that’s fast all right and actually instead of clicking on the body we need to click on HTML and then this will say find find the body find the body okay so does that make sense what the reason I put a click on HTML is because the body actually is nothing in it it’s super small so in this meat gives us a bigger target area I’ll click on the HTML and guess what happens a box grows in and now notice that you know it didn’t just like a peer already animated or grow go away because I put animation Phil forwards so this is a great way of like if you have like if your box said you know there’s like an alert inside of it then it’s a great way to like be able to share the message with you know the viewer like oh here grow the box there it is there we are and you can do other things in here as well like remember we said that in the last video opacity was opacity was a great was a great thing to transform or to transition so same thing with animation Oh 2:01 okay there we go so now it looks like it’s fading in and you can do all kinds of cool things but we’ll get more into that stuff like Nina in the other videos we talked about like how what’s a good way to introduce an element to the to the screen anyway uh this is really great I’ve had a lot of fun and this is these are animations so you have a challenge this week because next week we’re going to go into the elements and I’m not sure what element we’re going to do next week I’m thinking we might do something really simple like a button or like a drop down or something something simple because I want to spend a little bit more time talking about the UX of it like when is it a good moment to to spark an animation anyway your assignment this week is to go a code pin and or whatever and make something with animations like like try to invent something with everything that we’ve learned use transforms or use the animation property it doesn’t matter and then link it down in the comments below because I want to see what you guys are up to so I really appreciate you got watching this and I’m excited to see what you are doing and and just keep on hacking we’ll see you next week thank you so much for watching this video I’m really glad that you did it’s I’m glad it’s done too because I recorded like three times the first time was like over an hour and a half long I hope I can even get this edit down but I want to thank everybody who is a patron of the channel these are my patron buddies and what happens is people go to patreon.com/scishow that’s right they support the show and they support the show and make it free for everybody to engage with and watch and benefit from so we’re teaching skills here that are that are money-making skills it’s true with the things that we learned here at dev tips and other places you can get a job in industry and you can become a professional and you can make a living I do and that’s why I’m so interested in helping people come to it because they’re the there’s really no gatekeeper in this industry you just have to put in the time patience energy and effort to learn this stuff and get good with it and then it can be livelihood that’s why the people who are my patrons of the show are doing this they want to help you and everybody like you to benefit your life and to have a better life so if that sounds like some of the is something that you’re into if you want to be a patron check out patreon.com/crashcourse

Leave a Reply

Your email address will not be published. Required fields are marked *