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
Xem them danh gia xe hoi tai day.
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