Pure CSS Animations - Make a cool button, a sliding modal, and a product page! (No Javascript) | AJ Burt | Skillshare

Pure CSS Animations - Make a cool button, a sliding modal, and a product page! (No Javascript)

AJ Burt, Learning is Living Better

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
8 Lessons (29m)
    • 1. Quick Examples for Fast Learning

      0:53
    • 2. What Your Need for This Class

      1:06
    • 3. Animating Buttons, Background, and Text

      6:00
    • 4. Take Up Less Space with Image Hover Effects

      6:07
    • 5. Animated Modals with Pure HTML/CSS

      3:59
    • 6. Codepen Copycat: Transforming with CSS

      8:50
    • 7. Dress Up Your Animations with Cubic Bezier!

      1:59
    • 8. Next Steps!

      0:23

About This Class

Web Animations are a wonderful way to direct a user's attention through a website and improve their overall experience. In this class, we're going to learn how to make beautiful web animations using pure CSS.

Transcripts

1. Quick Examples for Fast Learning: Hi, everyone. Today we're gonna be learning about Web animation. Animation is really useful in so many different context. The human eye is wired to track movement. So especially when we're integrating this into a Web project, it really helps us control and direct users attention to certain parts of our Web page. Not to mention there's just something really fun and cool about moving your mouse for your finger around a Web page and seeing it respond to your actions. Today, we're gonna learn some Web animation tools that you can apply in a wide range of contexts. We're gonna learn how to make button, hover effects, image of her effects. We're gonna learn how to implant some cool motile functionality. And then we're even gonna learn how to copy a cool feature from 10. If you know CSS but have never actually use it to animate a Web page that's gonna be perfect for you. I designed this court's to introduce you to a lot of concepts in a short amount of time as possible, so let's get started 2. What Your Need for This Class: the class project is gonna be really simple. All you need to do is take one of the examples from this course and somehow expand upon it . You could mess around with the CSS, adds some new elements to the HTML and do whatever you want to just make it cool. Every month I'm gonna be choosing one class project that submitted, and I'm gonna be putting it on my twitter page. Let's talk really quick about what you're gonna need for this course. We're actually gonna be using code pen, so there's no need to download or install anything. I do recommend that you have an up to date modern Web browser. It doesn't matter which one it is as long as you've installed the most recent update. Because in this course we're going to speed things up a little bit by not bothering to write in code for vendors prefixes. I'm still gonna show you where to find those, but we're gonna keep things really simple and all up to date. Modern Web browsers no longer need the vendor prefixes we'd be using in this tutorial, so just make sure you have the most up to date version of your browser. Finally, as you go along, do make sure to copy that could pennyroyal for each example and paste into your class project, because we will be coming back to some of them later on in the course. If your browser is up to date, any ready to start animating somewhat pages, let's get started. 3. Animating Buttons, Background, and Text: All right, let's dive in and get started animating this Web page. As you can see, it's a super simple Web page. Just little called the action with this button. Right now, it doesn't do anything. So let's dress it up a little bit. Um, we're going to go ahead and jump into the code people. And the first thing you're gonna do is make a copy of this so you can save your changes. Come back to it if you want to reference it later. So where does getting click fork up here? Um, we don't actually need to sign up, so let's just say saves anonymous. If you have an account, you can log in and or if you want to stamp, you definitely can. But you don't have to. Sorry gonna do you that. And now, just so we can go back to this page later, we're going to go up here and copy the URL. We're going to start a project. Put your title in. We're just gonna say example one and peace to right there. All right, so now that we have done that, let's talk about how we want to animate this. Um, I think it be pretty cool if this button changed to a different color when we have her over it. All right, so there we go can see that the heavier effect is now applied when we have a rabbit. So how are we gonna actually go about animating this so it doesn't just jump right to that other color? We wanted to actually fade to that blue. So if you drag over the job of a script panel, you'll see I've paced of this link for you guys. Let's just open that right now about links. Gonna take us to the W three schools dot com website. It's a super helpful reference toe. Any of your CSS html JavaScript etcetera needs here. We're just looking at the transition property. Um, and before you talk about this too much, I just want to make a quick note. In this course, we're not gonna be using any vendor prefixes like Web get mas. Um, but do make note of this. If you want to support older versions of these browsers, then you're definitely gonna want to include them when you're implementing this on your own websites. So just keep that in mind Let's look at this in tax now. So we've got this transition and we see we can pass in a property federation, a tightening function, a delay and then, of course, initial inherit. So, in terms of animating the background color, I think for now let's just stick with property in duration and we can talk about some of the other uses later. Okay, so let's go back in and let's add the transition property to our button. And we do actually have to add this to the button class and not the button. Have her class because you can't pass in that transition property at the same time, you're modifying the actual effect you want to make. So let's go ahead and set the transition to the property of background color. And let's make it one second. We can have her over it now, and we see that now it's making that gradual shift from white to blue. Let's make it a little bit faster. Change it to point to, and now it's a much snappier effect. So we also this timing function, and basically you can pass in a lot of different things to this. Let's scroll down and you can see we have a bunch of things like Ease, ease in, ease out Right now, let's just stick with ease. And if we slow it down again, you'll notice that it It's not just, ah, smooth transition. Now it actually speeds up in the middle and slows down at the start and end a little bit. So let's change that back. And now that you've got this implemented, I'm noticing that one thing that looks kind of weird is that font color is not changing. So that's good. Or have her class and add just that weight color that looks a lot better. But one thing you'll notice, especially if we slow it down, is that the text is actually just snapping right away. It's not animating like the rest of the button, so one thing we can do is pass in a new value to this property. We can say color. Let's keep it two seconds. Ease has changed this back to 0.2 and you can see that they're both animating together. But this is a lot of repeated coating, and we obviously don't want to do that any more than we have to ever. So let's look at some other ways. You can do this. You can actually pass in, oh, as a property, and that targets every single possible animated property that an element can have and animates them. And so you see that now it's still working. Both of them are animating at the same time. Finally, let's talk about the last value can pass him to transition, and that's the delay. So let's sit a delay of 0.2 seconds. And now we'll see that when we hover over that button, it actually picks a second before the animation kicks it. We'll see in the next few examples how this can be really useful, and that's it. You're done with the first example. You can keep messing around with this code a little bit if you want to, or you can dive right into the next lesson. 4. Take Up Less Space with Image Hover Effects: all right. So for a second example, you can see we have this products page and each product has an image. And then a little bit of description and a buy button. And basically, if we had a bunch of products on this page, this would start to take up a lot of space. So we want to condense it so that we only see the images at first. And then when we have her over the images, we actually get to see the descriptions and that by button. So let's look at how we can do that, though somehow we're gonna need to contain the description inside of this image and you can see the in the HTML we actually have it set up so that the product image and the park description are both inside this thumb class. So first off, let's go ahead and we're gonna set the thumb class to have a height of 250 pixels, and we're going to set the over flu to hidden. You can see now that we can't see that description, it's hidden below the cut off, so somehow we're going to need to make it so that when we have her over one of these images , that description Div pops up and hovers over the actual image. So we're going to be needing to do some positioning to the product image tive in the product description. And to be able to do that, we're actually gonna want to set the position on thumb. Because if we are messing around with absolute positioning on the's, child classes were actually getting people's ish, inning them relative to the whole document rather than to that someday. If so, let's avoid that by setting the position here to relative. So we know we're gonna be doing some positioning both on the product image and the product description. So rather than add that position absolute attribute to both classes, let's add them to products. So we're gonna say, Product, they're both gonna have a position of absolute. We also know that we're gonna want to keep our image position rate where it is. So let's set talk 20 pixels. But we're also going to need to set where description is cause Right now, description is hidden behind that product image with a top of zero as well. So you wanted to actually be out of the page. So So let's give it a value of 250 pixels. And as you will probably recall, that's right below where thumb cuts off. So how are we gonna make it? So when we hover over these image moves up and then the description moves up to take its place, Well, you may have guessed we're going to use some hover and let's target the image. First, we're gonna say image and we're just gonna set the top to negative 250 fix ALS. So now that we've done that, we see when we have her over, these image is being taken off the screen. But descriptions not showing up, So weeding to fix that as well. And we're just gonna set the top 20 pixels now the descriptions actually showing up when we have her. So that's good. But how are we gonna animate this? We already know about the transition property, but let's sink really quick about where we want to add this to Were Anna meeting the image and the description, but it's gonna be kind of a pain to pass in that transition property to both classes So let's just go back to this product class where you've set the position toe absolute. And let's add in a transition there and the property, we're transitioning as top. Let's set to that. Let's give it a second and let's set the easing to ease. And now when we have over those where things, they're both sliding up together. But this still looks a little weird. I wanted to actually look like the description is sliding up in front of the product image . So how could we do this? Well, we could use different transition properties to make that description class move faster than the product image. But that's not very efficient to be adding that to two different selectors. So instead, let's go and target the image, and we're just gonna set the transition delay value to 0.5 seconds, and now we see they're animating separately. Let's speed things up a little bit. To make that a little bit cleaner lets it the transition delayed appoint one second and let's set the top transition to 0.6 seconds, and now it's a lot more snappy, and you can actually tell that this description Div is popping up in front of that image. Dave. Feel free to keep messing around with this code if you want to. But if you're ready, let's jump on into the third example. 5. Animated Modals with Pure HTML/CSS: All right, let's get started with example. Three. This looks a little bit familiar, doesn't it? If you have her of the button, you'll be able to see that it's the same page we were editing before. But if we look at the HTML, there's some different stuff going on here. It looks like there is actually a form on the page somewhere. Let's set the visibility two visible just so you can see what it's gonna look like. We can see that we're gonna have email, address, a name, a submit button and ACLU's button. But we need to figure out a way to actually make this form show up when we click on this button. So how can you go about doing that? First, let's set this H ref to target our metal def. If you've ever made anger links before, this is pretty much the same thing. So we did that still not doing anything, because we're gonna need to set the form overly visible when it's targeted. How can we do that? Well, turns out much like hover. You can select form overlay when it is targeted, and I were going to do for that is set the visibility too visible, and now we click the button, our foreign pops up, and when you click close, it goes away. So now that we've got that set up, how can we go about making this a transition effect? Well, let's try setting it up like we've done with the other examples. You can see it's not actually doing that transition, and the reason why it's not doing it is because if you think about it, how could we really transition from a visibility of visible to a visibility of hidden? What's the step in between their CSS doesn't know, so we actually need to give it something to enemy. And if you know anything about CSS, you'll probably think about the A pass ity function here. So let's give our default form overlay capacity of zero. And let's give our targeted form overlay capacity of what? And no woman click the button. We'll see. It actually fades in very cool, but that's not all we wanted to do. We also want to slide down when we click on it. So how can we go about doing that? Well, first, we're gonna need to set this form class to relative. Let's give it a position of relative and, let's say, its initial state to have a top of negative 300 pixels. So that way it's totally up to screen. Now when that form overly is targeted, we're going to want to change the form top and set it to zero pixels. And then we're just gonna add a transition class to form. Now we can see you. When you click on it, it actually slides down. Yes, sir. All right. So you've completed example. Three. Feel free to mess around with the form some more. Don't forget to save it to your project and let's move into our final example. 6. Codepen Copycat: Transforming with CSS: all right. So for our fourth example, I wanted to try and implement something I actually think is really cool about Code Pin. You'll notice you can resize these boxes, and when one of them becomes too small, the heading text appear, actually gets smaller and moves over into that site panel. So here we have just a really simple Web page with some sort of text, and we want to make it so that this heading does the same thing that could Pen does when the browser height gets to be too small. So let's think about how we could do that. First, let's start off by adjusting this heading class into the final state where you want it to be, and to do that were actually going to use a new property called Transform. If you've never used transform before, it's actually a really handy property that is extremely useful whenever you're working with animations. Um, do keep in mind the vendor prefixes, of course, when you're implementing it in your own Web pages. But again for this class, I'm assuming that you have the most up to date browser possible, whichever one you may use and transform is supported in all up to date modern browsers without vendor prefixes. So let's just jump in and start using it. There is a lot of different possible values we can pass in. There's two D transforms as well as three D transforms, but we're gonna keep it pretty simple for this example. So first, let's go in and select are heading, and we're going to just start applying transformed properties to it. So first we know we want it to rotate down about 90 degrees. To do that, we can just say 90 the E G for degrees, and you can see that it's already updated on the page being rotated 90 degrees. But something weird's happening here. You'll notice that it's actually rotating at the center of this image where, really, if we want it to be coming down into this side bit here, we actually want it to be rotating from the beginning of the element. So how can we do that? There's actually a property we can use to set the origin of this transformation. If you work it all in programs like photo shopper Illustrator, you probably know what I'm talking about when I say setting the origin point for a transformation. Um, but if not, we'll be able to see really soon here. So let's go ahead and call this transform origin property, and we're going to set it to center because we want the height centered. But we want the horizontal aspect of it to be left. And now you can see that it's actually moved it over into the side panel here because where it was transitioning from the center, it's now transitioning from the very left most point. So that picks looks a little bit out of place there, and also we can see that this top are here is still showing all of its space. And part of the whole reason for implementing this is when the browser heights too small. We want to be saving space. So let's go ahead and set the height of heading one 20 pixels. And now that way, spaces removed. All right, so we're not finished transforming yet. Let's go ahead and pass in another value and skill down that text little bit. Right now. It has a scale of one and lets it just set to a scale of 0.5 and now it's a lot smaller. So finally, we need to figure out a way to get this text centered here. Obviously, we could do that with some positioning. But there's actually a built in function in transform called translate. And what that does is moves around an element by horizontal and vertical values, much like position. So we're just gonna call, translate, and we're gonna pass in. Let's just say 20 pixels to start with, and if we compare them zero and 20 we can see that it's just moving vertically. For now, we also want to move it over horizontally, so let's add in negative 25 pixels. Now you can see that it's moved up a little bit, all right, so now the text is centered horizontally, but we still want it to be kind of a line to this text box here vertically. Let's change that to 60 all right, so now we have the heading set to where we want it to go when the browser height is small enough. But now we actually need to add back in the default values. So let's make a media query, and we're gonna say when the screen is any taller than 400 pixels, we're going to make some changes to each one. So we already know we're basically gonna be undoing that transform that we did earlier on in the document. And so what we could do is go ahead and copy all this and paste it in here, set the rotate to zero, set the scale back toe one and said that translate to zero. And then when our screen is tall enough, it's back where it started. Or to make things a little bit simpler, we can simply set the transform to it's default value and the same thing's happening. So also, we noticed that when the screen is high enough, that height is still missing. So let's go ahead and at that back in and we can actually do the same thing here and just the height initial. And now we're having such between these two states. So now that we have that set up, we can do something that's probably feeling a little bit familiar for, you know, and add in a transition to each one. So we're gonna transition all of these properties that were changing. Let's give it 0.38 seconds to do that. Let's let it ease. Now. We're seeing some of that same functionality that could pin has. I actually want to make it look like when this is changing that text boxes actually sliding up. So to do that, let's play around with the padding around this form group here. So let's go grab this out of the don't at it code and drop it up before a media query. And what I want to do is when things were actually collapsed like this. I want us that that top padding to zero and leave the 20 pixel patting on the bottom in on the side so that it's nice to the square like that. But when it's expanded that the petting to back, it's now. We're getting that nice space when we have it, and when we don't it's collapsing. Let's add a transition of that to make it look like that text boxes sliding up. So we're just gonna say transition Patty, Let's get 1/2 a second and said it ease. And now it's actually gonna look like that box is sliding up in damn! Based on that text moving. There you go, you've completed Example for on. That's the end of the official examples. But if you want to play around with this some more, we're actually gonna talk a little bit about this ease that we've been setting all your transitions to. And some ways we can actually play around with that to get some really snappy effects. So if you're interested in that head on to the next section, um, but if not, feel free to skip ahead to the conclusion. 7. Dress Up Your Animations with Cubic Bezier!: All right, let's jump back into our third example and talk a little bit about this ease value that we've been passing into transition. Basically, if you've ever used a program like Aftereffects before, you probably recognize a busy a curve and transition. Has this ability to anyone we're setting ease were actually specifying one of the few predetermined busy A curbs in CSS. And that's ease right here. I've got ease and just a regular linear transition set up. Let's look at how those compare, um, over two seconds. As you can see, they both take two seconds to get to the end point. But with the ease, it's speeding up in the middle and slowing down at the very end. So it actually in some ways looks like it's moving faster. Now we can do a lot of really cool things with this and just really play around with it so we can set some crazy values like this where it's actually over shooting its transition a little bit. We can make it stop in the middle, but for our middle example, actually just kind of wanted to overshoot itself a little bit just towards the end. So Let's look at what that might look like. Yeah, I think that will be pretty nice. So now we can actually just copy this whole text jump back into our example, and let's just replace the form animation with that cubic busier. And now when we click it, you can see it's actually over shooting itself a little bit cool. There's a lot of really cool things you can do with cubic busier, so I definitely feel free to play around with those. 8. Next Steps!: and that's it. You finish the course later this month, I'm actually gonna be releasing part two of this course, which is gonna introduce you to some cool new concepts like key frames, animating scalable vector graphics and reusing animations in different parts of your Web page and even in different websites entirely. So stay tuned for that. Make sure you're following me, and I'll see you then.