Learn CSS Animations Tutorial

all right hi everyone welcome to the css animations course so before we get started i'm going to create this video to kind of run you through what we're going to be doing in the course so i'm going to go through section by section and explain the skills we will be learning and i'm also going to explain a little bit about the course structure how things work so you can really get familiarized with everything before we go ahead and start so first of all let's talk about what you're going to learn by the end of this course so you're going to know the basics of css animations you're going to be able to apply it to real-world scenarios and use it in a variety of situations you're also going to be able to use or do the same with transitions and transforms so we're going to learn a ton of effects and css properties to be used with these uh animations we're also going to learn how to make these animations compatible across browsers and user friendly so you can really make the best out of them so the main way that the course works is that it's split up into sections with each section focusing on a single topic so for example one section can be focused on animations each section is going to have these tiny challenges in each video to kind of test the things that you learn in those videos but then there are also two extra challenges at the end one is just a large normal challenge to test your understanding and to you know really get you familiarized with the structure and then a real world challenge that helps you apply those skills to a real scenario so we'll see a couple examples of those in just a second so before we get started i'm just going to give you some warnings about the course so the initial challenges that you're working with especially in the videos and the non-real world ones may seem a little bit easy and kind of remedial but that's what they're kind of intended to do they're meant to get build some muscle memory for those skills so you can really get used to them and when you do end up having to use them in proper situations you'll be ready another warning is just with the playback window html and css renderings are going to be played in real time so if you speed up the video um or pause it or skip through it or anything like that just be aware that it will still be playing in real time it won't be playing with the video so let's go ahead and get started the first set the first section is going to be focused on transition so we're going to learn what they are where they can be used and how to actually apply and work with them so the main single normal challenge to get you used to it is just to create and apply a couple of transitions from scratch and now the real word the real world challenge sorry which is the fun part is to take these transition skills and apply them to a website where we you can see we have this menu here we have a couple of hovers and grow features that you can see here the next section is going to be focused on animation so we're going to be again learning what they are how they work and we're also going to be learning about the special features that come with animations called keyframes so we're going to be learning how to use those and then we're going to go ahead and customize our animations so just like before the challenge or the main challenge is going to be to just create and apply an animation from scratch this includes writing the key frames applying it and customizing it and then our real world challenge is to create animations for a landing page so it's pretty common to see animated landing pages especially for newer sites so we're going to be putting our skills to the test and actually working with them you can see this um a little gif here you can see that we have a nice animation in the background with an expanding background and then some faded in text so that's what we're going to be doing in that section the next section is going to be focused on effects and transforms so these aren't actually focused on animations directly but they are very useful when it comes to animating things and even outside of animations it's just general css so we're going to learn the various types of effects or transforms that we can use and then we're going to be applying and integrating them into our animations and transitions so both of these challenges these large challenges involve the animation skills we've learned in the previous section which is actually a great way to retain what you've learned but what we're going to be focusing on is creating animations and it's not really the animations that we're focused on but what goes inside them so the challenge is going to be to create and apply these animations using those effects that we learn in the section and then the real world challenge is going to be quite similar we're going to animate a logo we're going to be creating an animation using those effects and then apply those to a logo you can see that here we have a little animation uh that goes back and forth so we're going to be doing that in this section so the final section is quite unorganized it's not really focused on a single topic it's just those outlier videos that you can really put in any other section so these are still very important skills i highly recommend you watch them things like browser compatibility and streamlining your style sheets are all included in this section although there won't be any large challenges there will still be those tiny challenges that you know those mini challenges that test your skills at the end of each video but there isn't going to be any large real world scenario all right let's get started hi welcome back so in this video i am going to be talking to you about working with the scrimba workspace and really using the course to its full potential so i'm going to be going through and explaining what all of this does and we can uh you know see all the different components of this window and how you would use them so the first thing i want to talk about is the interactivity of this platform now you can go ahead and interact with the code that i'm writing at any point and it will pause and you can play around with it and experiment and see how things fit together and i really do encourage doing this because it can really help you solidify that knowledge that you're getting through the video instead of just sitting there and passively watching so the next thing i want to talk about is this window here so this is going to be where we see all of our previews and you can see usually i'll be using this mode where i have the um the box here which is in the corner not really visible i'll do all of my work and then we can just go ahead and open it up and we can see all of this here so we can go through do our work you get the idea so this is going to be updated live and we can see what's going on at all times and this is also interactive so you can pause the video and open it at any time this is going to be our html file we're not really going to do much work in here but here this css file is where we're going to be doing most of our coding and our stylings so i had to highly recommend just staying away from this window unless you want to try something out or you know maybe mess with the elements but you don't really need to know any of what's going on here for this course so that's pretty much it for working with the window it's very easy and intuitive and like i said please go ahead and try and work with the window don't just sit there and watch the video it can really help you you know get that knowledge and soak it in so that you don't just forget it right after you stop watching the video alright let's move on hi welcome back so in this video we are going to be talking about transitions in css so we're going to cover what they are where you can see them and where they can be used so right now i just have a little setup here where i have some text and when you hover over it it changes the size and the color so if i go over to my css file what we do is use something called a pseudo class which lets you set properties based on the state that an element is in so in this case whenever the heading class where any elements with the heading class are hovered over their color changes to aqua and their font size changes to 20 pixels so when you hover over this you can see that those changes are applied now that's all well and good but you can see that when we hover over it it's kind of choppy and it goes instantly from the properties of the normal state when nothing's being hovered over to the properties when it is being hovered over and so what we want to kind of do here is sort of transition it so that it looks a little bit more smooth and works properly now i'm not going to be teaching you how to do it but what we do is we use something called the transition property and like i said you do not need to know what this means or how it works but what this is actually going to do is basically allow properties that are specified to sort of transition over a period of time so if we go and hover over it now you can see that it transitions instead of just chopping straight to the new properties so over the next few videos we're going to be learning how to work with transition properties working with them applying them and just you know integrating them into our uh css and our style sheets all right let's move on hi welcome back so in the last video i talked about what transitions were and how they were applied in the real world but in this video we're going to be going through and creating and applying our own transition so this looks quite similar to the previous video and the setup that we had except i removed all of the edits and styles that allowed me to create that transition so instead we are going to be writing it step by step and i'm going to be walking you through how to create these transitions so let's go ahead and get started so in order to actually change the uh style that we want to use based on the state of the element we need to use something called a pseudo class so the typical formula for a pseudo class is you have the name of the class or the element or the selector it could be an id selector a class selector it doesn't matter and then you're gonna follow it with a colon and some word that's gonna describe what state you're trying to target so in this case our class selector that we're going to use is heading so we're going to type dot heading colon and then what we're going to want to use is hover so what this is representing is whenever this element or any elements with the heading selector are hovered over and then everything just works like normal we're going to open up our class and start typing whatever properties so remember these properties are only going to be applied when the element is hovered over or whatever pseudo class is being activated so let's go ahead and do that now i'm going to go ahead and change the color let's just go ahead and use something simple i'm going to maybe say brown and then i'm also going to change the font size so let's go ahead and set that to maybe 25 pixels so what we expect is when this element is hovered over i'm going to do that in just a sec what's going to happen is the color of the element will be changed to brown and the font size will be changed to 25 pixels so let's go ahead and do that nope refresh the page yeah there we go so you can see that when we hover over our element the color and the size are changed so now we have all that said and done but again like in the last video we need to fix it so that it has that nice smooth transition so the way you do that is you use something called the transition property now the general formula for this is the first part of the value is going to be the specific property you want to transition so for example i can target color only so i don't have to target the size and the color but i can target color specifically and then the second part is going to be the time that it takes to transition in seconds so i am going to go ahead and type maybe 0.5 seconds so now let's go ahead and check that out so you can see that the the size changes instantly since we didn't transition that but the color takes point five seconds to transition now if you want to target multiple properties all you have to do is separate them by a comma so i can target color and i can target the font size and i can even change the timing if i wanted to so i can set this to one second to change the size and point five seconds to change the color let's go ahead and check that out so you can see that the font the font size takes one second to change while the color takes point five seconds now this is good for specific properties but if you have maybe 10 or 20 styles that you all want to transition you're not going to go through and type all that out so the way you can do this is using the all shorthand so all you do is type all and this is basically going to take all of the properties that are changed based on the pseudo class and transition them so the one downside of this is really that you all have to limit it to the same size but if you want you can add extra properties after that to change their typing so let's go ahead and look at that and now you can see it does the exact same thing and it takes .5 seconds to change the size all right so now it's time for a little challenge i want you to go through take this text and transition it over half a second to change the font color to green the font size to 20 pixels and the spacing between the letters to 10 pixels all right good luck so let's go ahead and get started the first thing i want to do is talk about the properties i want to use now i'm going to be using this pseudo selector here to when we hover over it it is going to make all of those changes so let's go ahead and do that now first thing i want to do is change the color to green then i'm going to change the font size to 20 pixels in case you didn't know this already to change the letter spacing or the spacing between the letters you use that property and set it to 10 pixels so now when i go ahead and hover over this you can see it makes all those changes the last thing we need to do is add our transition property to our base selector so i'm going to go ahead and add that there and now i'm going to transition all since all of those properties need to be transition over half a second or 0.5 seconds now let's go ahead and view it you could see it makes that transition just fine all right let's move on hi welcome back so in this video i am going to be talking about some more properties and customizable features of transitions so we're going to be looking through and we're going to be looking at things like delays and specific timing functions that let us further customize our transition so right now we ended up at the point that you did the challenge and we have all of this over here so we have our changed font size and our color but now we're going to go through and really break apart this transition and look at all of the properties that come with it so we can try and get the most out of it so right now if we go to our css style sheet you can see that we have this transition um property here now although this is pretty good for basic you know usage if you don't want to really customize it and make it your own then this is all right but there are a ton of different features that you can use on top of this to really make the transition how you want it so the first of these that we're going to talk about is transition delay so what what this basically does is what it says it's going to add a delay to the beginning of the transition before it starts so let's say we want a one second delay for example let's go ahead and open up our site here we hover and it takes one second before it starts so again this just works with seconds value you can set it to whatever you want the next thing i want to talk about is breaking up our property and our duration into separate properties so although this is the typical way that anyone would do it you can break this up into specific properties so we can actually specify the properties we want in this property here transition property and we use a comma separated list of values or we can just use the all so we can say that here or we can specify color and font size just like we did before so for now i'm just going to set all now one thing you need to watch out for is if you use this you need to make sure you also use the transition duration property because what's going to happen is if you don't set this and you just have this property here it's going to set the property but it no duration will be set so therefore it will just look as if nothing happened so we're gonna go ahead and set that to 0.5 seconds just like that so there we go now we split up that one property into two so the next property we're going to be talking about is the transition timing function so what this is going to focus on is how our transition plays out is it going to be linear so it's just going to go from one point to the other with no really real shifts in speed or are we going to have it faster at the beginning and then slower at the end so the property we're going to use for this is called transition timing function i know it's quite long but this is the property that we're going to use so there are multiple values that you can put here so the default value that we're going to use is linear so you don't actually have to set it since this is the default but what's going to happen is this is pretty much gonna say uh from start to end it's going to go in a straight line pretty much no changes in speed we also have ease ease in and then we have all of these different um properties here so they all have to do with at what point does the animation or sorry the transition start to slow so why don't we just go ahead with ease here so now let's go ahead and check out our animation here so we have that one second delay and you can see although it's not really noticeable it does have a slight ease if i were to maybe increase the duration to two seconds let's just set the delay to zero seconds for now when we hover over it you can kind of see that towards the end of the animation it starts to slow down so there we go sorry the transition so there we go there is our transition timing function so those are the four main properties that we're going to be using throughout for uh transitions now i'm going to challenge you now so i'm going to go ahead and erase all of this so you don't get to see it so my challenge to you now is we have our css here what i'm going to tell you to do is i need you to modify this transition so that it only targets the font size it has a one second delay it takes .5 seconds to run through and it has an ease in timing function so go ahead and do that now all right let's go ahead and set it so first thing we want to do is set the transition property property so what this is going to do is because it's only targeting the size we're not going to use the all value we're just going to select font size we know that it has a one second delay so we're going to use the transition delay property and set it to one second the transition duration which is going to be how long our animation is going to take to run through is 0.5 seconds and finally the timing function we said was ease in so all we have to oops all we have to do is use these in and it's super simple that's all you have to do and if we go check it out now you can see we have that whole thing here so there you go that's pretty much it for all of the tasks we have to do with customizing transitions and things like that now in the next video i'm going to teach you a quick shorthand that you can use to avoid you know writing all of these different properties down and just condense it all into one property all right let's move on hi welcome back so in this video i am going to be going through and teaching you a shorthand simple property that can be used to combine all four of these properties into one single property so let's go ahead and talk about it now we have all of this customization set up but obviously you don't want to go through and type all of this for every single transition you want to do so that's why we're going to use one simple property that we can use to combine all four of these into one value so we did use this at the beginning and it is called the transition property that's it just transition so the way this works is you're gonna have four uh four words or values and you're going to combine them all and it's going to be used to set the property delay duration and timing function so the first thing we're going to talk about is the property so for example this could be all or font size or whatever and because we're just trying to copy these directly i'm going to go ahead and throw font size in there the next thing is going to be the duration so that's going to be 0.5 seconds the next is going to be the timing function so this is going to be ease in again we're just taking it from these values up here and finally is going to be our delay which is one second so let me go ahead and erase all of this and you can see that when i open up my uh browser here and look at it the hope got refresh it the hovering happens exactly the same with the same delay so this is one way to summarize all of that and you can see it only takes one line now the reason this is so useful is not only does it save space and time but when you get into stuff like browser compatibility which we'll cover later in the course this becomes an extremely useful way to you know keep your files small and not use as many lines so yeah i would highly recommend using this shorthand from here on out so i'm going to go ahead and erase this so what i'm going to need you to do is use the transition shorthand to create a transition using all of the properties that lasts half a second uses the ease timing function and has no delay all right good luck all right so what we're going to do here is use the transition shorthand property to summarize all of these properties into one single line so the first thing we're going to set is the properties that we want to target which is all of them then we're going to look at the time or duration of the of the transition which is half a second or 0.5 seconds then we're going to look at the timing function which is going to be ease and then finally the delay which is 0 seconds and since we don't actually need to include it since you know that's the default value we can just leave it at that so let's go ahead and look at our browser here and you can see we have no delay it changes all of the properties and it has an ease timing function all right so that's pretty much it for transitions in the next video we're going to be going through and creating a transition from scratch from the ground up using all of the tools and skills that we've learned so far alright let's move on hi welcome back so you've made it this far you've learned all about transitions and how to customize them so now it's time for a nice large challenge to bring everything together and create a transition from scratch so what we're going to be doing is creating a pseudo class and we're going to be using it to set certain properties over this with this hovering over this element and then we're going to use the transition properties or shorthand it's up to you to create a transition so the first thing i want is for when this heading is hovered over to change the font size to 10 pixels and the color to green just plain green and then for the transition it needs to have a one second delay focus on all of the properties have a one second duration and a timing function of ease in all right good luck and i'll see you when you're done so let's go ahead and get started now the first thing i want to do is create my pseudo class so i can actually add my transition so what we're going to do is just like before use the same class selector that we use which is heading and then we're going to add colon and hover to specify that we want this to be hovered over then we're going to add our properties as normal so i'm going to set the color to green and the font size to 10 pixels so just to make sure it works let's go ahead and check it out when we hover it gets smaller and the color is changed to green great now we want to add our transition so there are two main ways that you can do this so i'm going to start with the long way which is using all of the properties so let's go ahead and do that so first thing i'm going to do is set the transition property property which is going to be all since we want everything to be changed the transition duration is going to be one second as i said the transition timing function timing function is going to be ease in and finally the delay is going to be one second so there we set all of our transition properties let's go ahead and make sure it works so we hover it takes a one second delay and then it has an ease in timing property and the one second duration so it's all working good now let's focus on the second way which is using our shorthand so we're gonna use the transition property then we're to set the actual properties we want to target first which is all then the duration one second then the timing function is in and finally the delay which is one second so i'm gonna go ahead and comment this out um just so we can see the other section at work let's go ahead and hover one second and then it shrinks to green all right so there we go good job you've learned all about transitions and now you're ready to implement it into the real world in future sections we are going to talk about some extra features you can add on to transitions but we're going to hold hold on to that until the end of the course all right let's move on alright welcome back so in this video we're going to be going through and doing our first real world challenge so you can see here that i've built a tiny website nothing really much on it but this is designed to get you familiarized with the topics and properties that we've learned over the last few videos and really integrate them into a project that can you know really let you know how to use these properties and topics in the real world so i've left a description down here talking about the challenge basically what we're going to do is add a couple of transitions one to the title and one to the menu items so the title is going to be focused solely on transitioning the color while while the menu items have to both grow in size and change color so you can see some of the specifics here and also both of the transitions need to have a one second duration and an ease out timing function so go through familiarize yourself with the html that's going on here just look at how things are set up and how you're going to go through doing this all right good luck so let's go ahead and get started now before we add any transitions remember we need to add those pseudo selectors so we can tell css what we're going to do when these specific uh elements are hovered over so the first thing we want to do is change to this color this color when the title is hovered over so the first thing we're going to do is go and look for the title so it's going to be this element right here the h1 so we're not selecting the div of course since we're trying to change the color of the text not the div or the box containing it so let's go over here i'm going to go all the way to the bottom and now we're going to say dot title and use the colon and add a hover let's open that up now we're going to go ahead and set our color to that right there so there we go we've added the pseudo selector we hover over it you can see that it works we we didn't get to the transition yet but don't worry about it we'll do that in a second so now let's go ahead and focus on our menu items here so you can see here that all of our menu text has the exact same class which is menu link now the easiest way to do this would just be go and to go and use a pseudo selector with this class to target all of the elements here so let's go ahead and do that what i'm going to do is use dot menu dash link and then of course colon hover since we're targeting the hover now we're going to use the color which is that color that i specified in the challenge description and of course our font size which in this case is going to be 2.5 em so now we go ahead and just make sure it's working and you can see that when i hover over it the text grows so there we go that's one part of the battle done now let's go ahead and focus on our transitions so we're gonna go ahead and find the base class that these or the base selector sorry that these um pseudo selectors are applied to in this case it's just dot title for the title and dot menu link for the menu link now don't worry about the rest of these styles those are just to set up the website but what we really want to do here is add that transition so let's go ahead and use the shorthand property now for the title since we're only targeting one property we're just going to go ahead and say color now you can use all since it doesn't really affect anything but if we want to add more things to the pseudo selector later on it's better to just keep it like this unless you want to encompass all of those other changes then we're going to give it our duration so let's go ahead and say one second that's what i said in the um in the challenge description and then of course our timing function which is ease out so now let's go ahead and see what happens you can see that it changes the color right there and it takes one second now it may be a little hard to notice the ease out since the animation is quite short but it is there so now let's go ahead and focus on our menu items so let's oh sorry not menu item menu link since that's the text so let's go ahead and add our transition of course i'm you can go ahead and specify the properties individually but i'm just going to go ahead and say all to simplify things here next i'm going to say set my time which is one second and then our ease function now let's go ahead and look at it and you can see that that is working right there so now we've added our transitions to the website it was quite easy to do most of the work was really in just adding those pseudo selectors and knowing where to add them and once you get that done it's quite easy to just add the shorthand as long as you know what is going on all right let's move on hi welcome back so in this video we are going to be moving on to animation so we're going to be talking about what animations are what they do and how to work with them so just like with the previous section this video is going to be solely focused on a demonstration of what animations can be used for so we're not going to be doing any learning or covering any new properties but right here i have an animation of a little box that is actually moving around and changing colors and it is looping over and over again so this is done entirely in css and by the end of this section you will be able to recreate this perfectly so that's pretty much what animations can do instead of having to be limited to when a certain state is covered or when maybe you're hovering over an element this animation can be used to apply to any object and for any number of properties and not just that you can actually set up multiple steps so that you don't have to just go from one point to the other so animations can be used for a variety of things and they are very useful when it comes to making a site interactive and making it look good so this was done entirely in css and if we just go ahead and visit the style sheet now this is kind of what you're going to learn to do at the end of the vid at the end of the section sorry so feel free to go through and kind of explore this and play around with it if you want you will learn to do all of this in the coming videos but for now this is what we have and this is what we're kind of going to be working towards and this will produce an animation of this sort so animations are a lot more powerful this is just going to give you the basis of how to create them but you can use them for any number of things the possibilities when it comes to using animations are pretty much limitless so don't just feel limited to doing something similar to this maybe a box i really do encourage you to go and really play around with animations and see what you can do alright let's move on hi welcome back so in this video we are going to focus on defining and creating our animations so what we're going to do is go through and use a special property or system in css to create these um animations and then in the future videos we are going to apply them so one thing that animations that make animations a little different from transitions is that you define them standalone from properties or elements they aren't dependent on pseudo classes or anything like that so what we're going to do is use a special little system here to create these animations and then we can apply them to any element we want so they're not dependent or focused on single elements so what we're going to do here is type out at keyframes and what this is going to do is specify the keyframes for a specific animation and what's going to happen is here is basically we're going to set these steps that the animation is going to have to go through so for example it changes to the color red and then changes its width and then changes its height and you get the idea so let's go ahead and get started so once we type keyframes what we're going to do is set the name of the animation now don't worry about any of this uh we're going to cover this stuff in a future video but this is going to be the name that you want to give the animation so because i just want to do something simple i'm going to call it grow and then we're going to open it up with some curly braces so now there are two different ways you can go through here you can either use one or two lines to basically set the starting animation you know uh the starting animation properties and the final animation properties so you're only going to be allowed two steps from start to finish or you can use percentages to specify multiple steps in the animation and we're going to go through and do both of them here so the first thing we're going to do is do the start to finish method so what we're going to do is type from open up some curly braces and then type 2 just below that and open up some curly braces so in these curly braces here next to from is going to be the starting properties that we're going to be using and two is going to be the finishing so let's just say from we want the width to be 50 pixels now the reason that i'm typing this out is sometimes the starting properties won't always be the same as the normal properties that the animation is given so for example here we have 50 pixels and all of that but let's say for example that we want the starting properties to be 100 pixels or 200 maybe we want to change the color so we'll get more into that kind of stuff in the future videos when we talk about fill modes but for now let's just go ahead and cite the set the width to 50 pixels the height to 50 pixels and the color to red or sorry the background to red not the color red okay so now we have our starting properties let's go ahead and talk about our finishing so whatever we want to change we are going to include in here and you need to be really careful with this because sometimes over time things may change that you don't expect them to so for example the width could change to 100 pixels and you don't expect it to so you need to be explicit about all the properties that you want to change here so what i'm going to do is set our width to 50 pixels the height to 100 pixels and then i'm just going to set the background to green just like that so now what this is going to do is it's going to keep the width at 50 pixels it's going to increase the height and change the background so there we go this is what you do now let's go ahead and open up our browser and see how this looks and you can see that it grows just like that now it does reset and that's because we haven't specified a couple certain properties which we're going to discuss later but you can see that the animation does work now let's talk about the second way of doing it so now let's say we wanted to have multiple steps so if you watch the previous video you'll see that it went and it increased the width and then it increased the height so what if we wanted to do that well what we can do is use percentages to specify at what part of the animation do we want things to change so the percentage equivalent of this would be 0 and 100 but the main advantage of doing this is you can also add other steps so for example 50 and then we can specify things here so let's say i wanted to increase the width as well and add an extra color step what i would do is set the width to 100 pixels and again be explicit you want to keep the height at 50 pixels and the background to blue for example now let's go ahead and run our animation and you can see it does that change first and this is what i was saying about being explicit you can see let's say we wanted the width to stay the same we need to make sure that it is there so let's go ahead and refresh one more time and now you can see the full animation runs through with three steps so just to recap we have this keyframes we can set the keyframes using this syntax right here and we can set the name we have two ways of specifying our animation we can use either the from to with method which allows for two steps start and finish or we can use percentages to set certain steps in between the start and the finish and finally you have to make sure to be explicit the rule of thumb here is just to make sure that you include all the properties you want to change throughout each step that way you aren't missing any pieces or anything like that so i encourage you to go ahead and give this a try if you want go ahead and edit this and maybe add some extra steps you know see what you can do maybe mess around with some other properties and just really get a feel for defining keyframes all right so for a quick challenge here i'm going to ask you to create an animation called grow you have to keep that name the same and i want it to start with a width and height of 100 pixels and a color of blue and it will shrink to a width and height of 10 pixels and a color of red alright good luck so let's go ahead and get started the first thing we want to do is define our keyframes so we're going to say keyframes grow so that's going to be the name of the animation and because we're only using two steps i'm just going to go ahead and use a from two method here so you can clearly see that the starting properties were different from the beginning properties so let's go ahead and set those we're gonna set the width to 100 pixels and the height to 100 pixels and then our background to blue and then we are going to finish with a width and height of 10 pixels so that's going to be inserted into our two box and a background of red now let's go ahead and check it out you can see that it does that shrink with the color change as well all right let's move on hi welcome back so in this video i am going to be teaching you how to add animations and to edit their timing so let's go ahead and get started now in the previous video you may have seen some properties that i added to this box class to allow the animation to run well in this video we're actually going to be going through and learning how to do it so the first thing you're going to need is this property called animation name now this is going to allow you to specify the name of the animation that you want to use and this is the name you're going to get from your keyframes here so in this case it's going to be grow the next thing we're going to set is the animation duration so this is going to be how long the animation runs for so let's go ahead and say two seconds now this alone will be enough to run the animation but now let's go through and set two more properties that we can use to work with animations and sort of mess around with them a little bit so the first which is quite simple and self-explanatory is animation delay so this is going to be the delay before the animation starts on page load so let's say for example one second we go ahead and refresh it takes one second and then the animation runs so remember when when a delay happens and whenever the animation runs it is going to start from the zero percent or the initial start defined by the keyframes it's not going to take these properties unless they are the same as the one set here so whatever properties are set here it's going to take it straight from there the next property we're going to cover is animation iteration count count so this is going to specify how many times you want the animation to run so this can be a number so for example we want it to run three times we go ahead and refresh the page we have that delay and it runs three times just like that so that's good and you can set the number of times you want it to run but one of the most useful features here i think is infinite so this is basically going to say that the animation should run well infinitely it just runs uh indefinitely until you close out of the page so this can be used for a variety of things and when we combine it with some of the other properties you can basically set up a sort of loop that allows the animation to seamlessly run not like this where it's kind of chopping back and forth but will allow it to look like it is going in a true loop so those are the four properties i wanted to cover here and these all have to do with timing now let's go ahead and start with a little challenge i'm gonna go ahead and erase all of this so let's go ahead and just change this name to first animation so what the challenge here is is i want you to add this animation to the box give it a duration and delay of one second and set the iteration count to four alright good luck so let's go ahead and get started first thing we want to do is set the animation name and this is the name that you gave the animation in your keyframe definition so here we're going to call it first animation next we're going to set the duration to 1 second the delay to 1 second using those two properties respectively and finally we are going to use animation iteration count to set the number of times we run the animation to four now just to make sure that works let's go ahead and run it so we'd have that one second delay four times each with a duration of one second so there we go if you did it any other way and you end up with that result good for you then you know maybe you went out on your own and researched a little bit but this will allow you to basically get those exact results using these four properties all right let's move on hi welcome back so in this video we're going to be going over a couple other properties that we can use to customize our animations now these aren't going to be really focused on timing but instead it's going to be focused on how the animation plays out its direction and how it really behaves so let's go ahead and get started the first one i want to talk about is the animation timing function so just like with transitions this is going to allow us to specify how we want to work with our um uh our functions here so what we're going to do is going to go through and we're going to say ease or ease in and this is just going to specify the speed of our animation so let's go ahead and just set it as ease here now i'm going to go ahead and refresh and you can see here that it kind of has that feel you can see it slow down towards the end so the next one i want to talk about is animation direction so this one is new and it's basically going to specify how we want our animation to play out so the default is it just goes through from start to finish no real changes but here we can actually say if we want it maybe to go backwards or if we want it to alternate between backwards and forwards so for example this box could shrink and then grow again so let's go ahead and look at that so the default value for this is normal so that's basically from start to finish nothing crazy and then we have reverse so this is going to well reverse our animation and basically go from finish to start you can see that here you can see it starts as a red box and grows to that large blue box we also have two other properties or sorry values which are alternate which basically just you know oscillates between start and finish starting from the beginning one so this starts from our large blue box and then we have alternate reverse so this is just like alternate but instead of starting from the actual start it actually starts from the finish so it's going to start as that tiny red box and then grow and go back and forth so if we refresh here we wait over that delay and it grows back and forth just like that so the final one i want to talk about which is a little bit complicated because it can depend on the you know conditions here is animation fill mode fill mode so what this is going to do is basically specify what styles we want to apply to our box here or in any element with our animation after the animation is complete so right now you can see that you know the ant it looks a little bit choppy after the animation is finished we don't know what to do but in this case we can actually you know for example finish and apply the styles at the finish line now the reason this is a little complicated to understand is because it also depends on the direction um and the iteration count of our function here or sorry our animation so for example if we have alternate reverse and we have the iteration count five times for example it could finish at the start and you may get a little confused but i'd recommend you know just experimenting with this a little bit and you know really getting the feel for it so just to make things a little simpler i'm going to remove or comment out the iteration count and the direction so it just goes from start to finish once so just to make sure let's refresh there we go now you can see it goes back to that blue box but what we want to do is if we want it to finish on our final property or our final styles we set this value to forwards so we refresh you can see it finishes and it stays there or we can set it to backwards which in this case is going to set it to the beginning so we refresh it shrinks and then it sets to the beginning values and then we also have a special value called both and what this is going to do is follow both rules but it also depends and this is mainly used for things like alternate and alternate reverse and this is basically going to depend on where it finishes it's just going to get the styles of wherever it finishes based on the animation so if i go ahead and uncomment this out change the iteration count and all of that and we refresh you can see it has all of these crazy maneuvers we don't know where it's going to end but that both property is going to allow us to finish it right there and so that's pretty much it so we have four words backwards and both and that's going to allow you to specify what we want and basically just you know make sure that we can get our animation to finish on the right spot so now it's time for a little challenge i want you to set the timing function of this animation to ease in i want it to alternate starting from the beginning and alternate back and forth and i want it to finish and retain the same styles that it finishes with alright good luck all right let's go ahead and get started so the first thing we want to do is set the timing function so we're going to use animation timing function and set this to ease in next thing we want to do is set our direction to alternate starting from the actual beginning so i'm going to go ahead and do that animation direction alternate next thing we want to do finally is set our fill mode and i said i wanted the styles to finish on whatever the style is finished on depending on you know if it finishes at the actual start or the actual end and of course the way we do this is with first of all the animation fill mode property and then we want to use the both uh value so this is going to allow us to set these styles based on wherever the animation finishes let's go ahead and check this out we refresh you can see it has that ease the iterations play through and then it finishes on the correct style with the correct timing function all right so good job you finished that challenge and now we're going to bring all of this together and first of all use a shorthand to you know combine all these properties and then complete a large challenge all right let's move on hi welcome back so in this video we are going to be learning a shorthand to combine six of these animation properties into one line just like we did with the transition section there is a single property that allows us to shorten this whole thing and combine it into a single property so this property is called animation and it basically goes in the order that you see here so it starts with the name which is going to be grow then the duration just one second i'm basically just taking all of these values from here then our timing function which is going to be ease in then our delay one second our iteration count for and finally our direction which is alternate so it does look quite intimidating but as long as you you know get this order down you will get it in no time now if you notice there is no fill mode included in this animation so if you want to set the fill mode at all most people don't really it's not really commonly used but if you want to you can add it in on top of this shorthand so let's go ahead and comment this out now let's go ahead and check out the animation so i'm going to refresh and then you see it does the exact same thing as it did before with all the shrinking and then of course we use the fill mode on top of the shorthand to animate it alright so now it's time for a little challenge so i want you to use the shorthand to apply this animation to this box it needs to have a one second duration and no delay at all it's going to have a timing function of ease it's going to alternate so it's going to start and then you know keep going back and forth from the start and it's going to run forever all right good luck all right let's go ahead and add this property so first thing we're going to do is use the animation shorthand first thing we're going to set is the name of the animation which is grow then the duration which is one second then we're going to go ahead and add our timing function which is ease then our delay which is zero seconds and then our we want it to run forever so we're going to use infinite this is equal to the equivalent of the iteration count and then our direction and since we want it to start from the actual true start and go back and forth we're going to use alternate now notice that we're not going to add a fill mode or a anything like that because this is going to run forever and so the animation will never actually end and therefore we don't really need to add an end mode now let's say or sorry a fill mode now let's say we wanted to change this to something like reverse now if we did this the animation would only run a oh sorry well not the direction we're not going to change the direction let's say we wanted to change this sorry to maybe two iterations this is a finite number and it will end at one point and therefore we're going to need to set the fill mode but in this case since it's infinite it will never end and therefore we do not need to set the fill mode so if we go ahead and look our at our animation here you can see that it's running through with the properties that we set here forever all right so that's pretty much it for animations good job on making it this far you've learned a ton about all sorts of things to do with css animations and transitions in the next video we're going to go through and complete a large challenge all right let's move on hi welcome back so now it's time for a large challenge to summarize up to summarize this animation section so what i'm going to let you do is create an animation called supersize which basically takes this tiny box that's on the screen grows it to 20 pixels then changes the color to red and then grows it to 50 pixels and changes the color to green so that's the basis of the animation um it's going to last two seconds it's going to have a timing function of ease out uh there's there isn't going to be a delay and it's going to run four times and it's going to alternate between start and finish alright good luck and i'll see you when you're done all right let's go ahead and get started so the first thing i want to do is define my animation so i'm going to do it using at keyframes supersize so that's going to be the name of the animation and because we have three steps we're going to go ahead and use percentages so let's go ahead and just define the percentages first so we're going to have zero percent so that's going to be the start to 50 percent which is going to be the middle and of course 100 at the end so at zero percent we're going to have the width and height and color all the same so we're just going to use the same properties that we have up here at 50 percent we said we want it at 20 pixels for both the width and the height and the color which in this case is going to be the background to be red and finally at the end it has to be um with a width and height of 50 pixels and a background color of green just like that so now we have defined the animation now we have to go through and add it so instead of defining all those properties we're going to go ahead and use our shorthand so let's go ahead and set it animation so we're going to start with the name which is supersize two seconds which is going to be our duration then our timing function which is going to be ease out then our delay which is zero seconds since we said we don't want to delay we want it to run four times so we're gonna say four for our iteration count and then we want it to start go back and forth between start and finish and of course since we're starting at the actual beginning we're going to use alternate now just to cover our ends and make sure that the animation runs smoothly we're also going to add our animation fill mode and set it to both what this is going to do is finish with the styles that we finish on and the reason i'm using both and not forwards or backwards depending on how this ends is in case we want to edit this later on this will always stay true so let's go ahead and check out our animation we're going to refresh you can see it does that grow movement right there and it's going to run through four times and then finish on the correct styles all right so there we go now if you chose to not use the shorthand and go ahead and use all of the separate properties that is also okay although i do recommend using the shorthand in the future just to shorten things up all right let's move on hi welcome back so in this video we're going to be going ahead and creating another animation real world challenge that involves all of the topics and properties that we've learned over the last few videos so we're going to be creating and animating or well we're just going to be animating a landing page today so i've created a little template to work with and so what we're going to be doing is going through and animating all of this so let's go ahead and read some of the details first thing we're going to do is fade in this background and expand it so it's going to expand from left to right and it's also going to fade in now that's going to happen over the course of 1.5 seconds then there's going to be a 0.5 second delay and then this text will fade in over the course of one second so this is all going to happen consecutively it's all going to happen in sequence in that order and just to finish things off all of these styles should be retained when the animation ends so let's get started so the first thing we want to do is create the keyframes for our two animations now we're going to have two main animations here one that expands and fades in the background and one that fades in our text so let's go ahead and do that first thing we're going to do is define our keyframes so we're going to start off with our expansion so i'm just going to call this expand fade in remember the keyframes keyword there now because there are only two main states which is the beginning and the end we're just going to go ahead and use a from two cycle instead of using all those different percentages so i'm going to say from now what we're going to use is the opacity keyword which is going to allow us to set the transparency of our object so in this case we're going to set it to a zero opacity or zero percent opacity this is going to be completely transparent you can't see it at all and a zero percent width now we're going to add our two selector here and we're just going to set the opacity to 100 and the width to 100 percent now what this is going to do is expand the width all the way to the end and of course uh remove that transparency that we have here so this is our expansion our background animation here now we have to create a second um a second set of keyframes for our other uh for our text so i'm going to say just just call this fade in and we're also going to use the from 2 since since we don't really need to you know add multiple states so i'm going to say from we're going to set the opacity to zero percent here and then our two statement so this is going to be opacity 100 percent and that's all we're putting in here since we don't need to um you know expand the width or change the color or anything we're just focusing on opacity so now we have our two keyframes let's go ahead and add them in so let's go ahead and start with our background first and since we're not using all the huge wide range of animation properties we're just using a couple i'm just going to use their individual properties for now so let's go ahead and start so the first thing i want to target is our image here so our background so i'm going to go with our image wrapper so what i'm going to do is set the animation name and then i'm going to set that to expand fade in next thing we want to do is set the duration so we're going to say animation duration this is 1.5 seconds there we go now let's go ahead and see what else we need to work with here so the timing function of course animation timing function which is going to be ease out and finally the styles that need to be retained so we're going to use the animation fill mode for this and i'm just going to set it to both as a precaution of course in case we want to change the animation later on or uh make it repeat multiple times maybe change the direction we're just going to keep it at both for now so we have all that set up let's go ahead and refresh the page and see if it works so you can see that the background works just fine now the next thing we want to do is focus on our text here so what i'm going to do is add animation name and call this fade in there we go now let's set the duration to one second now let's go ahead and add the rest of our features that we added before so of course our timing function is going to be ease out and our fill mode is going to be both now there is one thing that we missed out which is of course our delay now this is a little bit confusing what basically happens is you're counting the delay from the second the page is loaded not from any other animations so what we actually have to do is add that delay that we want on top of the duration of the previous animation so if we actually go to our css remember our image our image expansion and our background takes one and a half seconds to complete but we also want that half a second delay so what our true delay actually needs to be is two seconds since we want half a second on top of that already 1.5 elapsed seconds so let's go ahead and add the animation delay to two seconds so whenever you're adding multiple animations on top of each other make sure to keep that in mind you need to have um you need to have the everything set up so that it is tracking delays from the beginning of the page load so let's go ahead and refresh make sure it works we refresh loads in the background that's short delay and then our text fades in alright so there you go that's pretty much it for our keyframes i really do encourage you to go experiment with this a little bit since you're just trying to get into the real world way of doing things so go ahead and see if you can add a couple more properties maybe add you know percentages instead of just from two change some of the actual properties themselves so if you want to change the timing function maybe some special um styles to retain after the animation is complete go ahead play around with it and see what you can do all right let's move on hi welcome back so in this video we are going to move on from animations and start looking at some of the effects and special css tricks that we can use to enhance our animation skills so in this section we're going to be learning about transforms and transform methods so basically what these are are certain methods and values that you can combine with a certain property which we're going to learn about in just a second that can be used to change an element in some way so this could be used to change positioning scaling rotation all sorts of things and it can really enhance an animation using a simple method so you can see here i have a little animation set up now don't worry about it this is just to demonstrate the properties that we're going to be working with but the majority of the section is going to be focused on actually working with these transform methods and pro and values so what i'm going to do is throughout the section we're going to be using these transform values in here and then what's going to happen is the animation is going to run it through and so here this box will have those transforms applied to it so we can see what's going on so let's go ahead and get started now what we're going to use here is something called the transform property and what you do is you type this sort of function it looks like a function and you pass some values into it and what this function will do is transform hence the name of the property the element in some way so you can see that for the box itself i actually already use a transform to move it to the center and what you can see here is we have this function so it has brackets and then what this does is basically you give it the you give the transform property this function and it's going to translate our box by a certain amount so that's a little intro to it and in this video we're going to be talking about the scale property or transform so let's go ahead and get started now the first thing you need to know about transform the transform property is the multiple methods that you can use to work with it so typically you're just going to be inserting one transform so in this case is the translate property but this can also be used in multiple ways so for example this is translating it on both the x so the horizontal and the y or vertical axes but if you wanted to translate it in one axis alone there's a separate function for that in the case of scale that would be scale x so if i'm going to go ahead and type scale x here and in here we're going to input the value that we want it to scale by as a multiple of its own size so for example if i put a 2 in here it's going to double in size on the x scale if we look at the animation here you can see that on the horizontal axis it is doubling in size we can also input decimal numbers here to represent smaller sizes so for example if i put 0.5 this is going to represent half its original size we look here you can see it shrinks now that's for the x-axis for the y-axis all you have to do is input or change this to scale y quite simple now you can see you can see now instead of having that horizontal shrink we're having a vertical shrink while the horizontal distance remains the same now what if you wanted to use both of them in conjunction together well there is actually two ways to do this now what you can do with the transform property is use multiple transforms on the same line all you have to do is separate them by spaces so for example if i wanted to scale the our box horizontally by a factor of 2 and scale it vertically by a factor of 0.5 or basically half its vertical size we can just write it like that separated by a space now you can see it doubles on the horizontal axis and halves on the y axis but there is an easier way to do this and it's a shorthand that we can use to combine these two together so what this is called is just scale so what we're going to do is just type out scale now what's going to happen here is we have the x value first so in this case it's going to be 2 and then the y value which is 0.5 and now you can see we get the same result now this space rule still applies and you can combine the scale transform with other transforms but in terms of just combining scale properties and transforms alone this works just fine and again if you want to use the shorthand uh but you know avoid scaling in one axis we can just set a value to one so what this is going to do is just scale it to the same size that it currently is at which just doesn't do anything oops so you can see there what this does is it scales it on the x-axis by 2 or you can just write this as scale x 2. all right so now it's time for a little challenge what i want you to do is to scale this box right here by a factor of 2 on the x-axis and a factor of 4 on the y-axis now you can do this using either the long method or the shorthand method as long as you get the result i will show both ways it is fine all right good luck all right so let's go ahead and get started so the first thing i'm going to do is use the transform property and now i'm going to go with the shorthand method first we type scale and remember it is the x scale followed by the y scale so we're going to start with 2 which was our x scale and then 4 which was our y scale and then finish it with a semicolon now we look at it you can see it is scaling properly now if we want to use the long method what we can do is use the space rule to split up these transforms into two separate functions but keep them in the same property so we're going to start with scale x which solely focuses on the horizontal or x-axis we're going to set that to 2 and then follow it by scale y remember separated by a space not a comma that and then we set this value to four and you can see we get the same result all right let's move on hi welcome back so in this video we are going to be talking about the next uh transform value or method which is translation so what translation basically does is move the element that you're transforming across the x or the y axis depending on the function you're using or both it could be both depending again on what the function you're using um and it can accept any sort of value based on the element so for example it can use pixels it can use percentages um any typical sizing value or unit that is used typically in other css parts of css so for example font sizes width height things like that can be used in the translate methods so let's go ahead and get started now what i'm going to do is first talk about the similarities between this and other transform methods so in the last video we talked about scale x scale y and the scale shorthand and pretty much all of the other transform functions follow this same method you have an x function or an x method a y method and then you have some shorthand that combines both axes so let's go ahead and get started first thing i'm going to do is translate it across the x-axis so translate x now let's just go ahead and say 50 pixels what this is going to do is move it 50 pixels to the right and what you're doing here imagine that you are adding 50 pixels onto uh you know the width from the left of the page so as you add positive values you're moving more towards the right if you imagine like a mathematical axis with you know the positive numbers on the right and the negative numbers on the left then adding a positive value will continue to move it towards the right so if we go ahead and look at this here you can see that it is moving 50 pixels along this axis so now let's go ahead and try out translate y so when we do that you can see that it moves down as well so 50 pixels down and just like that now we can also input negative values to this so if i give it negative 50 pixels you can see that it will move the opposite direction and if we give it uh translate x of negative 50 pixels it'll move to the left just like that so now let's go ahead and talk about our shorthand so what i'm going to do is set it to translate and here i am going to put um let's just say 10 pixels this is going to be the x axis and then 50 pixels to the y axis and now you can see that it's going to move 10 pixels to the left and 50 pixels downwards so again this can use negative values but like i said it can also use other values or other units so we can go ahead and say we want to translate this by negative 10 percent so that's going to be 10 of the width because it's the x-axis of our element and then we can also translate it maybe 20 on the y-axis and you can see that it has the same effect but instead this is using the values based on percentages so it's based on the actual element itself and it all depends on the situation that you're using it in sometimes you may want to use absolute values such as pixels and sometimes you want to use relative values such as percentages here it all depends on the situation but just know that these functions these transform methods can support both all right so now it's time for another challenge what i want you to do is to translate this box here by half of its width on the x-axis and a quarter of its height on the y-axis good luck all right let's go ahead and get started so first thing we need to do is add our transform property now i'm going to be going as usual with the shorthand method first and then we're good we'll go the long way so let's go translate just like that now what we're going to do is because we want to translate it by half of its width on the x-axis we're going to input 50 percent here next thing we want to do is add the y-axis value which is going to be 25 because we wanted a quarter of its height and now you can see that that is working perfectly so you can see here that it is moving uh just as we intended it to in our translate function here now if you wanted to split it up into separate parts what we're going to do here is say translate x 50 and translate y 25 so what this will do is of course separated by a space it will add both transform methods and we will end up with the same result all right let's move on hi welcome back so in this video we are going to be talking about the next transform method which is rotation so out of all the methods we're going to talk about this is the only one that doesn't have x and y components instead there is just one function that rotates it along a single axis again you can't really rotate on the x and y axis without going into the 3d world which we're not going to do in this course so let's go ahead and get started now all you have to do is use the method rotate in combination with the transform function sorry transform property and here we're going to input our value now most people would use degrees it's simple to understand and work with but you can also use multiple other units such as radians and gradients now if you want to go ahead and use those you can research them but they're a little bit advanced and so we're just going to be going with degrees so the way you would do this is by typing whatever value you want for example 80 or let's just go with 90 to be simpler and then you would use the unit deg or dagger for degrees then close off the bracket and if we go ahead and look at our animation here you'll notice that it has a 90 degree rotation now the reason it's moving like this is because of the properties i've got up here to center it but if i were to remove these for example it would rotate along a single axis so don't worry about that just focus on how it's rotating so let's go ahead and move on now if you want to rotate it the other way around you can use negative degree values so i could put negative 90 degrees in here and it would rotate the other way and that's really it for rotation it's really simple to understand all you have to know is that what's happening is it's just rotating in a clockwise direction so if you're to rotate it 90 degrees it would go basically think of a clock and it would go a quarter of that clock downward so if you were to maybe look at this top face when it first starts you'll notice that at the end it ends up on the left side all right so now it's time for a little challenge i want you to rotate this box so that this top face ends up on the bottom when the rotation is complete good luck all right so let's go ahead and get started now to make this this top face face the bottom at the end of the rotation we figured out that we need to rotate it 180 degrees again imagine a clock and that the minute hand or the hour hand it doesn't really matter is pointing directly up at 12. if we want that hand to point downwards towards six o'clock we need to make a full 180 degree turn so let's go ahead and add our property so what we're going to do is go ahead and type transform and then here we're going to type rotate remember not rotate x or y or z these are for the 3d rotations we're just going with the 2d here and then we're going to type whatever value we want so i'm going to go ahead and type 180 degrees now we if we look at it you look at the top face it ends up on the bottom when the animation's finished so what's interesting about this 180 degree turn is you can also go the other way and end up at the same point you can see if i put negative 180 degrees here although it rotates in a different direction the top face still ends up at the bottom face so there are two ways to do this question both are valid and correct all right let's move on hi welcome back so in the last video we talked about rotation now in this video we're going to be talking about a similar type of rotation but it isn't exactly the same so we're going to be talking about the skew transform now it's a little hard to wrap your head around without a solid concrete example but just to put it into word form you're basically going to be rotating something along an axis instead of just rotating the face around so for example with normal rotation you think of the clock the hands of the clock moving uh in a direction so it strikes a six-hand it moves around and it rotates now instead skewing is more like spinning the clock so that it's spinning around instead of just turning the hands so i think this would make a little more sense with a demonstration so let's go ahead and do that so just like with the rest of the transform functions you're going to have an x axis or a horizontal axis function a y axis function and of course one that combines the two so let's go ahead and start with the x-axis for example so i'm going to say skew x because this is a form of rotation it's going to use rotational units so i'm going to go ahead and type 50 degrees so now if we go ahead and look at this you can see that it isn't really being rotated as the hands on a clock are but it's kind of being moved around so you can see that it's it looks like it's being you know maybe tilted a little forward it looks like a 3d rotation so let's go ahead and change that to skew why 50 degrees and now you can see that it also looks like it's being rotated so imagine the clock was you know face down and then you would turn the hands face down like that so instead of having it directly in front of you it would be faced downwards and you can see the hands actually moving so those are the two types of skew now there aren't really many cases to use these but they do become useful in some scenarios especially for special types of animations for logos and other things like that we'll actually be working with them in a real world challenge later in this section but let's finally go ahead and talk about the combination which of course is just called skew you're going to start with your x-axis skew which is let's say 40 degrees and then let's say 20 degrees on the x on the y-axis sorry and now you can see it makes those skews alright so now let's go ahead and start with a challenge i want you to go ahead and skew this box on the vertical axis by 50 degrees good luck all right let's go ahead and get started so first thing we know is that we want to use the skew y function since we're working with the vertical axis the next thing we're going to do is specify the amount that we want to skew it by in this case 50 degrees so we just use the deg unit to specify degrees and there we go it's working perfectly now if you want if you want to just take the longer route you can also use the shorthand and just set the x skew to zero degrees and then set the y to 50. it's going to do the exact same thing but i would recommend just going with the standalone skew y function since it's just shorter and it causes a lot less confusion all right so that's pretty much it for skus in the next video we're going to go ahead and start with a transform challenge combining everything we've learned over the last few sections or over the last few videos sorry all right let's move on hi welcome back so in this video we are going to be going through and performing a challenge that not only combines all of the features and methods learned in this section but also some of the animation skills that we learned in the previous section so the challenge goes as follows you need to create an animation that lasts two seconds and runs infinitely it has default timing functions and everything else is default the only things you need is that the name of the animation are is transform it lasts two second and has an infinite run time so it runs forever basically so this f this animation is going to scale our uh box here that we have in our screen and it's going to take it and scale it down by a factor of 2 which means it's going to half in size this box is going to be translated 50 pixels to the right here and 0 pixels down so it's just going to be translated 50 pixels to the right and it's also going to be rotated by 45 degrees alright good luck all right let's go ahead and get started so the first thing i want to do is define the animation so i'm going to write keyframes and then the name which is transform and then since we only really want to end up in a decimation and we don't have any starting values we're just going to put 100 percent so this is just going to define the end of the animation we don't need to define a start point since we're not changing anything at the start so before i write anything down let's go ahead and add this animation to our box so i'm going to go animation name this is going to be transform we said it's going to last two seconds so animation duration is gonna be two seconds and then it needs to run forever so we're gonna go animation iteration count infinite so there we go we've added the animation now let's go ahead and talk about some of the transforms that we need to do so first thing we're going to need to use is the transform property now i'm going to start at the super low basic level we're just going to start from you know individual axes like scale x scale y and then we're going to work up and combine them using shorthands so let's start with our scaling i said i want it to half in size so what we're going to do is use the scale x and scale y functions remember separated by a space since if you want to use multiple transform methods you need to separate them just like that and because we want to basically have it in size we're going to use 0.5 just like that next thing we want to do is rotate it by 45 degrees so what we're going to do is use the rotate method here and then 45 degrees now i did not specify whether it was supposed to be clockwise or counterclockwise so either way could have been fine as long as it's 45 degrees if you did it counterclockwise it would look like this again both methods are acceptable the last thing i wanted to do is translate it by a certain amount which i said 50 to the right so what we're going to do is use the translate x method and use 50 pixels here just like that now we didn't say we wanted any y translation so we don't need to include a translate y so there we go that's what we're doing and if we look at it it's being translated everything is working fine now of course the translation may not work exactly as we want due to our transforms here but if i go ahead and comment them out you can see that it is now being translated 50 pixels scaled down and rotated 45 degrees to the right and just to clear things up this the reason it wasn't translating maybe perfectly before is because of the code i put in here to center our box in the middle of the page so don't worry about that this does work perfectly so now let's go ahead and actually combine these because there are some things we can do here to shorten it up a little bit so the first thing i'm going to do is combine the scalex and scale y transform methods into a single method so we're going to use scale and of course this takes the x value and the y value just like that the rotate method doesn't have any shorthand since it's only doesn't have multiple axes so this is fine now we can also shorten this down into a shorthand you don't really need to since we don't have both translate x and translate y but just to you know show you how it will work i do it now so what i'm gonna do is erase this we're gonna go and use the translate method and of course no x or y just translate then we're going to start with the x value which is 50 pixels and the y value which is zero pixels since we didn't have anything we don't want to move it down and there you go it works fine now this is the shorthand form of it of course you can also keep this as translate x 50 pixels and you don't need this zero it is all up to preference and how you want to order it um but as long as you end up with this result where it's shrinking rotating and translating then you should be fine all right let's move on hi welcome back so it is now time for our third and final challenge which is to use transforms in combination with animations to animate these boxes here and create a little logo animation using css exclusively so let's go ahead and check out our animation task now i've left live i've really left this up to you to experiment with the values and see what works best so a lot of this is really up to the user or whoever's watching the video so you can go ahead play around the values and you really get a feel for the animation and make it your own so here are some of the base uh rules that i want so first of all what is going to happen is these boxes are going to be translated to the middle of the page they're going to be stretched on the x-axis to kind of elongate them so they look a lot longer it'll kind of look like a flag at the end of it and they're also going to be skewed to make the boxes look that they've been tilted about 80 degrees counterclockwise from the 12 position on a clock so if for example the boxes were facing up what would happen is they would be tilted 80 degrees to the left so they would kind of be facing around the 9 position so that's what i mean by that so the animation should run once and it should retain all of its styles when the animation is complete so i recommend go ahead play around with this and really see what kind of transforms uh you can bring into this to to you know make the animation look better while also adhering to these rules all right good luck all right so let's go ahead and get started the first thing we're going to do just like with any animation is define our keyframes so i'm going to go ahead and use the keyframes keyword and we're just going to give this a name of move for example now again this is only going to have two states and in reality we only need one state which is the 100 percent state since we're going to be moving these four boxes from the start to the end so what i'm going to do is just use the 2 or you can use 100 it's up to you i'm just going to say 2 and now here is where we're going to specify the transforms that we want to use so firstly we're going to use the transform property and now remember we're going to have to concatenate multiple transforms together separated by spaces so let's start with our translations so we want to we want to move this to the middle of the page so we obviously know we're going to be moving with both the x and y axes so let's go ahead and use the translate property just not translate x or translate y the whole thing now you could use percentages but the thing is if you noticed what's going to happen is it's not really going to move uh properly because of the way the html is set up you can see that we're targeting um it may not be targeted properly so instead we're going to use the absolute view width and view height values so they're denoted by vw and vh so i'm going to start with 50 vw so that's the view width and then 50 vh so what this is going to do is basically say move 50 view 50 of the view width so this is the absolute maximum this isn't you know apparent the width of a parent or anything this is 50 uh to the right here and then 50 down just like that next thing we want to do is focus on our scale so we're going to use scale x in this case since we only want to elongate the box we don't want to completely enlarge it and we can use whatever value but i'm just going to go ahead and give it a value of 10. it's quite arbitrary you can mess around with it and see what works best for you and finally we want to work with our our skew here so you can work with rotations but it may be a little hard to get it right so what i'm going to do is actually use the skew and it is specified in the instructions to use a skew to skew it now the thing is with skew is it may not accurately reflect the rotation units so if i say around 80 degrees counterclockwise it won't be exactly 80 degrees if i set it here so i played around with these values a little bit and i like you know i really encourage you to do the same so um and i found around 60 degrees would give you the optimal um skew to work with so again if you want to go ahead and play around with it go ahead uh see what kind of values work for you and then when you find it or you know even if you have an updated value you can input that um through the interactive window so there we go we have the keyframe set setup now let's go ahead and apply it to our logo here so the first thing we're going to do is go ahead and target the box class since we're going to be targeting each individual box not the logo since if you looked at the html these are four separate elements these four divs and they're contained inside this logo class so here's where we're going to apply the animation so i'm going to use the shorthand feature since we have a bunch of different properties we need to specify it's easier to just go up with it like this so let's go ahead and first type out the name so i'm going to say move next thing we want to do is check for the duration so i didn't explicitly spec specify a duration here so what we're going to do is just go and maybe give it a two second duration next thing we're going to do is specify the timing function so this is really important for making animations look good if you set the wrong timing function it may not play out right now i think for animations like this ease in out works best since what's going to happen here is hold on you you saw that animation one more time what's going to happen is if you look at the timing function it kind of uh you know it starts out slow and then slows down towards the end it's really nice to look at so there we go we have our timing function the next thing we're going to do is look at our delay so we're going to go ahead and set a one second delay so last thing we want to do is just a couple of the antics so first we want to see how many times we want the animation to run so i'm going to go ahead and say just run it once uh next thing is the direction we want it to run in and since we want it to go from start to finish we're just going to set this to normal and finally the timing function we want to use which is just going to be both so let's go ahead and close that off and now you can see our logo is animated so one thing you may have noticed here is that this kind of looks a little weird now if we actually go ahead and analyze the way that we skewed it we used a skew a skew property here that basically skews it on both the x and the y axis so let's go ahead and experiment with that and i'm trying to show you you know what kind of skus can really result how it can drastically change your results so i'm going to go ahead and start with a skew x just to see what this does refresh the page and you can see that that does kind of look the same but what would happen if we use a skew y now if we go ahead and look at our animation you can see that it looks completely different so this is where you really need to be careful changing the type of skew or what axi axis you're skewing your objects on can completely change the way that your results look now if you notice when i use that skew this simple shorthand or just skew x it completely was off from what i wanted the animation to be it looked a little weird and kind of stretched out but when we use this value you can see that it does have that curve from the top here it looks kind of about 80 degrees counterclockwise and everything is working fine so just make sure that you know that kind of distinction and you know what kind of skew to use now it is perfectly fine to use the xq it's just going to create a different animation than intended which again is fine but for this challenge it's best to stick to the rules given in the challenge task so that's pretty much it for the animation now if we want we can go ahead and kind of make this an infinite looping thing since it's kind of boring to have to refresh the page one time so we can for example change this to infinite and we can go ahead and just set it to alternate so what's going to happen is this is going to alternate back and forth just like that and now we have a nice infinite logo animation so you can see that based on what you set our properties to and what we work with here we can change the way our animation looks and we can even change it for different purposes so that's really important to keep in mind alright so there we go we have finished all three real world challenges so in the next section we're gonna go through explain a couple tips and tricks extra features don't really fit into any other sections but are still really good to know all right let's move on hi welcome back so in this video we are going to be learning about css prefixes and what they are important for so you can see i have a little setup going with some hovers and transitions and some animations here now although this may work here on some of the older browsers so for example if you're using old versions of internet explorer or chrome these newer features of css may not be supported and every browser has its own way of interpreting and rendering uh this css and sometimes browsers don't work with these normal properties so what you actually need to do is to really have as much browser support and to display those animations on as many devices as possible is you need to use these things called css prefixes now one common trick is that for maximum compatibility prefixes are used in combination with a fallback property in case this newer css feature doesn't render so for example if you're using a newer or normal version of an internet browser what this transition or animation would render fine but if you're using something like internet explorer 8 or 7 or one of those really old versions you would use something that is simpler and easier to render so for example this would just be one solid color or this animation wouldn't happen at all so in this video we're going to be focusing on the prefix part of this um of this problem of browser compatibility so there are a couple of prefixes that are used for support in different browsers now the way you write a prefix is whatever property that you want to try and add support for is you go dash and then the prefix dash again and then the rest of your property so for example it could be animation and you would just paste that in now although you pasted it twice one of them is for general support and one of them is for support for a specific browser so let's go over some of the common some of the common prefixes so the first and most widely used is webkit so this is mainly used to support ios or tablet browsers so for example safari or some android browsers or chrome and this is has a lot of support for mobile so you would include this to add mobile support the next one that we use is ms and this stands for microsoft and what this basically is is for support for internet explorer so those super old versions of internet explorer that don't usually um support these typical animations will now be supported uh using this prefix the next one that we typically use is moz moz for firefox and finally the last one is for the opera browser which is just dash o so let's go ahead and insert that so you can see that this makes absolutely no change to what we're doing here everything is working just fine but the reason that you need to include this is as i said to add browser compatibility because if these lines weren't in here if you were using something like a phone to view this page then it wouldn't render properly so the next thing i want to talk about is where would you use these transitions now usually you can search up if you are sorry prefixes you can usually search up if you need to use these prefixes but it's usually incl you usually need to use it with the newer versions of css so for example animations and transitions are relatively new so you would need to use prefixes so what you would do is for here you would go with the exact same system so you can go webkit dash and then what i usually do is just copy this over for everything so we'll go with ms moz and oh just like that and so we've inserted all of these browser webkits so we've done all of this and we're working with it fine now again make sure to search it up and make sure that you need to include um these prefixes now it doesn't really hurt to include them it won't cause any major errors but i would so i would recommend to be as explicit as possible and use all of the css prefixes to try and add as much support as possible and this is when those shorthands really come in useful because if you were splitting this up into six different uh properties for this animation here what you would have to do is copy that over four more times for all six of those properties for each prefix so this is where those shorthands really come in useful all right so now it's time for a quick challenge what i want you to do is add browser support for this transition property here good luck so let's go ahead and get started now you may have seen this earlier in the video but we're just going to go through with it and do it again so we're going to use the four main prefixes which are the ones for tablets and mobile devices the one for internet explorer firefox and opera so we're going to start with webkit which is used for the tablet and older versions of chrome so let's go ahead and do that then we're going to go with our ms for microsoft or our older versions of internet explorer again i'd recommend just copying it over it's a lot simpler and just takes up less time then we're going to go with our next prefix which is moz and then finally o for opera so there we go we have now added full almost full browser support for this element here now again i would recommend also adding a fallback if you're going for a large site that you're trying to reach as wide of an audience as possible with as wide a range of devices add some fallback using an older feature or property of css just to make sure that um this runs smoothly on all devices even though it may not be exactly what you want it's still better than having maybe a broken page that doesn't have the styles you want you can just kind of customize it according to the needs of each user all right let's move on hi welcome back so in this video we're going to be talking about css variables and how we can use them to really work and you know shorten our styling process and just streamline the whole thing make everything more efficient so css variables are a way of storing values of any kind in some placeholder that you can then use multiple times throughout the um throughout your styling process and some of the main advantages of this are first of all if you want to change or if you want to use a single value or a color for example on multiple elements all you have to do is assign it to a variable and then use that variable over and over again and the other advantage is that if you want to update something you don't have to go through and change that value for every single element it's applied to you can just go to wherever you define your variable write down make your changes or whatever and it will update for all of the elements that you changed it for so how do we actually define variables so what you're going to want to use is something called this the root just like that now what this is is it's basically defining um whatever whatever styles or things that you want to define outside of any elements because what you want to do is if you define a variable inside of these elements they will only be applicable to that element that you defined it in based on the selector which basically renders the entire thing useless so you need to use this selector right here the root selector to define your variables now to define a variable what you're going to do is start with two dashes and from there you're going to type out whatever you want your variable name to be and if you have any if you have multiple words you're going to separate them by dashes so let's say for example i wanted to shorten this um this right here this 50 pixels which is defining our box unit so let's go ahead and call it box unit just like that and remember we're separating it by a dash for spaces then we put our colon and then whatever value we want we want to assign it just like that so now what we have done is declare this variable called box unit in the root and here this will be applicable to all of the elements here now in order to use this you can't just type it in you need to use the var function so what you do is you type out var whoops and then here you're going to type the name of the variable so in this case it's box unit we do the same thing for the height just like that and now you can see that we have successfully defined our variable and it works perfectly now if i wanted to maybe change this box unit variable all i have to do is go to the top set it to 100 for example and now you can see it changes both the width and the height now although it may not seem that all that practical with just two uses of the variable but when you have maybe hundreds of boxes let's say and you want to and they all have the exact same width and height this would come in extremely handy because you only have to change it in one location all right so now it's time for a little challenge you can see that we have this color right here this hex code color used two times in our css style sheet what i want you to do is define a variable called main color change it to this value and then use that variable to represent this color instead of the explicit value itself all right good luck all right so the first thing we need to do is go through and define the root selector here so that we can use our variable across the entire um style sheet next thing we want to do is use the two dashes to indicate that we are declaring a variable then we put our name main dash color again make sure to space it properly and then we put in our value which is just going to be this color code right here next thing we want to do is change all of these definitions to the uses of the variable so again we need to use the var function to make sure that we are getting the variable itself and then we type in the name just like that now what i'm going to do is go ahead and copy this over to the other use of this value and when we paste it let's just make sure everything's working we hover and the animation is working fine now again if you wanted to change this color so for example if you want to just set it to plain blue maybe that would also work now we hover over it changes to blue and right here the animation is using the blue color instead all right let's move on hi welcome back so in this video we are going to be talking about using something called a cubic bezier function to basically customize our timing when it comes to our transitions and animations so what are cubic bezier functions well to think of it simply without going too deep into technical terms two points from zero to one on both the x or horizontal and y or vertical axis are used to define a curve now this curve is defined so that progression is on the y-axis and the time past since the start of the beginning of the animation or transition or whatever is going on on the x-axis so basically what happens is over time the progression is going to change now this may sound a little bit complicated without putting it into words so there's this really cool visualizer that helps you look at cubic bezier functions to sort of visualize it and see what you're getting yourself into so here's an example of one of the pictures the website link is up here it's cubic bezier cubic bezier.com so what you can see here is two points and these two points are placed around this this plane here from zero to one on both axes and what happens is this curve is defined uh based on wherever these points are placed now what happens here is you can see that um you know as time goes on it the progression is quite slow and then it speeds up speeds up and then slows down so this is kind of the equivalent of an ease in out function if you kind of look closely right there you can see that's kind of what the function looks like and it goes you know the progression is quite slow at the beginning and then it increases and increases and gets faster and then it slows down towards the end so that's kind of how you can think about these things so i'll show you an example of another one so here is another image based on these points right here you can see the points are placed differently and now the progression curve kind of happens differently so you can see it starts to progress really fast in the beginning and then gets slower and slower so you'll notice that all of these points here are between zero and one but what happens if we go over that limit well here's an example of something that where it does go over that now although it looks it is acceptable in terms of css you can put it in it won't cause an error what happens is the progression goes over a hundred percent so it actually goes beyond what the animation is supposed to be finishing at so for example what would happen here is it progresses progresses and then it gets to 100 percent and then jumps over so it extends beyond the animation and then kind of bounces back it goes back downwards so what would happen here is for example if you're trying to scale something up from you know a scale of one to a scale of two what happened is it would scale up to two then scale a little bit beyond two and then shrink back down to the completion which is at uh one hundred percent or the scale of two so we're going to go ahead and write a couple of these cubic bezier functions in css and we can basically define them just like we've used those words to define timing functions so things like ease ease in and ease and out so let's go ahead and do that now now first of all if you look at the top here you can see a sort of css definition of the cubic bezier function based on where your points are in the visual visualizer but in case you're wondering what it stands for the first point is going to be the x coordinate of this pink point or the beginning point then the y coordinate and then the x and y coordinates of the second point respectively so let's go ahead and try and implement some of these cubic bezier functions and just see what they do so i'm going to go ahead and use this first one right here so what i'm going to do is go to our animation and where it says when it gives our timing function which is ease out right here we're going to turn this into a cubic bezier and then we're going to start defining our numbers so first it's going to be the x and y coordinates of our beginner's beginning point which is point 62 and point 15. point sixty two and point fifteen you can put zero point it won't really make a difference and then we put point four and point nine for our second point so point four and 0.9 so now let's go ahead and check out how our animation looks you can see that it looks drastically different from before it kind of slows and you know it's kind of like an ease in out cycle instead of just an ease out where it slows down towards the end so in my opinion this does look a lot better and you know you may want to customize it to something completely weird that you wouldn't find um in any other um typical normal animation uh timing function so you wouldn't find it in an ease or an ease and out and this is honestly the real power of cubic cubic bezier functions is you can really customize your animations beyond what's available in just the normal css set progression curves and so this is where cubic beziers really come in handy but it's not just available to you in animations you can also use it pretty much anywhere that a timing function is used so for example if i go ahead and define the timing function of this transition here i can also use this cubic bezier function in css right here and now when we hover over it oh gotta refresh the page we hover over it you can kind of notice how it speeds up and slows down uh it speeds up only in the middle so if i actually extend this it'll make a little bit more uh you can see it a little bit better so let's go ahead and check that out so you can see that it speeds up and slows down towards the end and it's also quite slow at the beginning all right so now let's go ahead and start a challenge i want you to use that um that little website there to create or kind of visualize a cubic bezier function that starts off quite slow and then progresses and speeds up all the way towards the end so it starts off slow and then speeds up and goes gets faster and faster and faster so it does not slow down towards the end it's kind of like an ease in so kind of think of it like that all right good luck all right so let's go ahead and get started so what's going to happen here is i am going i'm not really going to show the visualizer but what i got is a cubic bezier that looks similar to this right here so it doesn't have to be exactly like that it could be a variety of things but as long as the this value the second value is quite small and these other three are quite large relative to each other then you should be in the clear now the real tell comes in actually looking at the animation and seeing if it looks similar to mine um but we're going to go ahead and look through that in just a second so let's go ahead and implement those cubic beziers so what i'm going to do is go to my animation here and i'm going to replace this timing function with our cubic bezier now if we look at it you can see that it's starts speeding up towards the end now it's a little hard to tell since it's infinite and alternate so what i'm gonna do is just uh change that out so i'm gonna go to we'll go one iteration and keep that as alternate just so we can see how it works we refresh and you can see that it starts off slow and speeds up towards the end so if it looks something like that you are doing it right i recommend going around and playing with this a little bit so you can really get the feel for how cubic bezier is cubic bezier functions work and just you know interact and how they play into animations like this all right so this pretty much concludes the course unless more tips and tricks are added after this as of now this course is complete i hope you learned a lot about css animations and transitions you really have come a long way and learned a ton of advanced css that can help you in your future web development career all alright thanks for watching and good luck

Channel: Scrimba

Views: 48,967

Keywords: CSS, HTML, CSS Animations, Scrimba, frontend web development, frontend

Id: LCEgHntqBps

Length: 122min 34sec (7354 seconds)

Published: Thu Sep 10 2020