- Another type of animation that you can create with CSSare called Keyframe Animations.Now those are a lot tougher to codethan regular animations,especially when you have to worry about prefixes.Now I've installed a gulp CSS plugincalled PostCSS Animate.It's going to automatically createall the transition code for you.So it's pretty easy to do.You see, you add an animation namelike this called bounce,and it creates all the keyframes for you automatically.

Notice that it's doing all this codeand then in addition, something like autoprefixeris going to add additional codeso 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 usingright here on this pop-up.So if you choose one of theseyou can see that different animation.And we can add those just by copying this nameto our animation sequence.

So let me show you how that works.So I've got this section for my productsand I want to add an animationthat 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 createtransitionthat spans everythingat 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 transformso that these start out at a hundred percentand we'll also set the opacity to point eight,and if we save thatyou'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 thisor whenever this comes into focus,then I want to do the followingwhich will be to make the opacity oneand also transform.

Scale, one point three.So this should be pretty similarto what we did with the people.So let's go ahead and save that.And now whenever this takes overyou'll see that these are actually gettingto be a little bigger.Now there's a little bit of a problemthat you could probably tell.What's happening here isbecause of the way these are drawn,some of them are behind other elements.So we're going to need to adda z-index here,and whenever we hover or focus,we'll modify the z-index so thatit's anything other than zero.

So one will just make it go on topof 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 scaleand 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 eightbecause the default is one.And then we modified it herein the transition event.

Right, so that is pretty much just like what we didwith 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 animationthan just zoom in,or actually, sort of a compound animationwhere it's zooming in,but then it's also doing something else.So, what I'm going to do isright here, inside my hover and focus.I'm going to also modify the product nameand I'm going to set thatso that it uses an animationname of slideInand 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 animationnot animation name.And you can see that now when I roll overyou'll see the animation play.

That's not just that zoom,but also a slide up of the text right herewhich I think looks pretty niceand you can try some of theseother 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 themin this animation library.I think I liked it better when it just slid back up.And what this is doing is addingall this animation code for you.Autoprefixer is taking care of all the prefixesso that it works in as many older browsers as possible.This is a great use case for Post CSSand it makes adding animation,especially keyframe animations,a lot of fun.

Resume Transcript Auto-Scroll

Author

Released

1/22/2016

Learn how to create responsive single-page websites with PostCSS, the CSS post-processor engine that extends the power of CSS through JavaScript. These step-by-step instructions take existing HTML markup and add style, animation, and responsive navigation. This combination allows for dynamic one-page sites—a popular design that's now even faster and easier to create with PostCSS. Along the way, Ray Villalobos introduces some handy plugins, tips for integrating PostCSS into a Gulp-based workflow, and techniques for making layouts more responsive with Flexbox.