7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 33Length: 4.8 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.1 CSS Animation Refresher

Hello and welcome back to practical web animation. In this lesson I want to give you a quick refresher course in animating with CSS, and more specifically I'm going to be taking a look at the CSS transition property to create our animations. So, for our very first pen here I'm going to start from scratch. So, if you go to codepen.io and create your own pen from scratch, you should be able to follow along just fine. So we're gonna keep this nice and simple. I really just want to focus on the CSS syntax here. So I'm gonna start by creating a button. So we'll create a button maybe even give it a class of just something like btn and then inside that button will give it some text, and then we'll put our closing button tag. So, then down here at the bottom we'll see our default rendering of a button, and it's going to look different depending on what browser you're using but there we go. So, if you want to customize the look of our button we can jump into our C.S.S. and create a rule for the button class, for example we can give it a background color. Maybe a dark red such as 600 which would be the same thing as typing 660000, give you the same result there. We can give it a text color of white and then we could remove any borders if we wanted to, so border: none, and there we go. It's nice and clean now we can make it a little bit wider maybe one hundred pixels wide, and we'll set our height to maybe forty pixels, and if you're using a button element usually the text will vertically and horizontally center itself without much effort on your part. We consider font-weight here to bold and any number of CSS classes you wanna play to animate round the corners a little bit, as well by setting the border or radius to four pixels something like that. So we have a basic button here. And and it's a good starting point and let's say we wanted to make it a little more interesting, so when we hover over it maybe it changes colors it brightens up a little bit, so we could do a dot B.T.N. colon hover. And we could change our background color when we're hovering over. So let's set our background color to maybe aa three three three three, or the short cut which is just a three three, and now when we hover over it, you'll see it brightens up quite a bit. So let's say that we weren't totally pleased with that I mean it looks nice, we like the way it looks when its resting, we like the way it looks when we hover, but we want something a little bit smoother, a little softer. So, I want to create a transition from that initial state to the hover state so that when we hover over, it doesn't just snap to the new color, instead it animates to the new color, and we're going to be using the transition property for this. Now, I'm gonna jump into my settings. I don't want to mess with prefixes right now, so I'm going to jump into CSS, and for vendor prefixing, I'm just gonna click on auto prefixer, and we'll go ahead and save that. So under our border radius I'm going to create a transition property here, and for the transition property we need a couple of things the first thing we need is the. The items that we want to or the properties that we want to animate, so let's say we wanna animate the background color. And then we're gonna type a space and then we need the duration of the animation, how long we want this animation to last. Let's say we want it to last one second. We're going to type one and then the letter s, a lowercase s there, and then a semi-colon to end our statement. We're going to animate the background color over the course of one second. Now what are we animating it to? It doesn't matter. What this is saying is that any time we change the color of the buttons that meet the requirements for this selector here, so anything with a class of button applied to it. Whenever we change this property, it's not just going to change to that property, instead, it's gonna animate from its current state to whatever the new value is. So we recognize here that the background color is going to go back to the short cut here 6,0,0, and then our new color, when we hover over it is going to be a,3.3. So this doesn't have to be a hover, this can be anything. Anytime we're going to change the color of that class, then this transition is going to go into effect. So now if we hover over that button you'll see it's a much smoother transition. That's a very subtle effect but it's very easy to achieve. Again we're just achieving it using regular C.S.S. and then adding this transition property. So, let's say that we had two properties that we wanted to animate. Let's say we wanted to animate the font size for example so by default let's set our font size here to, let's do 14 pixels. I'm gonna shape bring it up a little bit. There we go, it's a little bit larger now. And let's say we wanted to enlarge it a little bit when we hover over it. So here we want to set font size to 20 pixels. So when we have a hover it will see the text immediately gets bigger while the background behind it animate slowly. And you might think that you need to add another transition property here for our font size, but we don't really need to do that we can shorten that by changing this from background color to all. Now any properties that change that are animatable in CSS any properties that change will automatically animate. So if we hover over it now you'll see that not only does the background color animate, but the size of the text animates, as well so those are the basics of using this transition property to create animations using CSS. And you will be amazed, once you start playing with it, at all the different things you can do, all the different effects that you can achieve, using this transition property in CSS. And certainly we'll cover many of those as we move forward. So now that we've refreshed our minds on how to create animations in C-S-S. And the next lesson we're going to have a short refresher on using jQuery to animate items. So thank you for watching and I'll see you then.

Back to the top