Join Ray Villalobos for an in-depth discussion in this video Make keyframe-based animations using the Animate.css library, part of Building a Responsive Single-Page Design with PostCSS.
- View Offline
- Another type of animation that you can create with CSS are called Keyframe Animations. Now those are a lot tougher to code than regular animations, especially when you have to worry about prefixes. Now I've installed a gulp CSS plugin called PostCSS Animate. It's going to automatically create all the transition code for you. So it's pretty easy to do. You see, you add an animation name like this called bounce, and it creates all the keyframes for you automatically.
Notice that it's doing all this code and then in addition, something like autoprefixer is going to add additional code so that it works with older browsers. Now where is it getting all these animation functions from? They're coming from a library called Animate.css, and you can find that at this url, and you can see all the names that it's using right here on this pop-up. So if you choose one of these you can see that different animation. And we can add those just by copying this name to our animation sequence.
So let me show you how that works. So I've got this section for my products and I want to add an animation that plays whenever we roll over these elements. I'm going to start by creating just a normal transition, and that's going to go inside this product item section. So right over here, I'm going to create transition that spans everything at point four seconds, or four tenths of a second, and uses the ease in and out function.
Then I'm going to transform, or at least set up my original transform so that these start out at a hundred percent and we'll also set the opacity to point eight, and if we save that you'll see that these will become a little less opaque. And then what we can do is add using the ampersand, which is the parent selector, just say whenever somebody rolls over this or whenever this comes into focus, then I want to do the following which will be to make the opacity one and also transform.
Scale, one point three. So this should be pretty similar to what we did with the people. So let's go ahead and save that. And now whenever this takes over you'll see that these are actually getting to be a little bigger. Now there's a little bit of a problem that you could probably tell. What's happening here is because of the way these are drawn, some of them are behind other elements. So we're going to need to add a z-index here, and whenever we hover or focus, we'll modify the z-index so that it's anything other than zero.
So one will just make it go on top of all the other elements. So when I roll over these, all that animation happens. Not sure if we need this transform. Let's check this out. Save that without this original scale and I think it'll still work. By default, I think the scaling is set to one. So, we didn't really have to include that one. Sometimes we have to include the original animation. It's like here, we added opacity originally at point eight because the default is one. And then we modified it here in the transition event.
Right, so that is pretty much just like what we did with the people. Let me show you how to use this Animate CSS library. So what I want to do is the product name. I want it to have a slightly different animation than just zoom in, or actually, sort of a compound animation where it's zooming in, but then it's also doing something else. So, what I'm going to do is right here, inside my hover and focus. I'm going to also modify the product name and I'm going to set that so that it uses an animation name of slideIn and watch the capitalization.
Up over half a second. Let's try that out. Let's do one second. I think it might work better. And now when we roll over, let's see if it works. I may need to add a display of block here. So let's try that. Display as a block element. And animation, I think it just needs to be animation not animation name. And you can see that now when I roll over you'll see the animation play.
That's not just that zoom, but also a slide up of the text right here which I think looks pretty nice and you can try some of these other animation names in here. So there's like a zooming version. Let's see what that looks like. Sort of a zoom. Zoom in up, will sort of zoom in from the bottom. So let's try that one out. All we have to do is just name this zoom. ZoomInUp. And let's go ahead and see how that works. That is a slightly different effect.
There's a ton of them in this animation library. I think I liked it better when it just slid back up. And what this is doing is adding all this animation code for you. Autoprefixer is taking care of all the prefixes so that it works in as many older browsers as possible. This is a great use case for Post CSS and it makes adding animation, especially keyframe animations, a lot of fun.
- Structuring the HTML markup for a single-page design
- Using PreCSS Sass-like imports in PostCSS
- Creating Sass-like variables with PreCSS
- Building styles
- Creating a layout for the header and navigation with Flexbox
- Creating and styling sections
- Animating page elements with PostCSS