From the course: Building a Responsive Single-Page Design with PostCSS

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Use regular CSS animations to create an slide-in effect

Use regular CSS animations to create an slide-in effect

From the course: Building a Responsive Single-Page Design with PostCSS

Start my 1-month free trial

Use regular CSS animations to create an slide-in effect

- [Voiceover] With PostCSS, animation is going to be a lot easier than with regular CSS. Now that's because we're using the autoprefixer plug-in and don't have to worry about prefixing any of our animation in CSS. Let's go ahead and add a really nice animation to this animation section right here. And we'll also spread this out so that it uses up a little bit more room. So whenever you want to make an animation in CSS, you can use either a transition or a frame base or keyframe based animation. And transitions are actually super simple. All you have to do is modify something and then specify how you want the transition to occur. So here we have, for example, this color that is set to the background color, which is white. And over here, whenever we rollover, we have that color showing up as yellow, but this is happening immediately with no transition at all. So if we want to, we can add a transition and then specify how long we want that change to take over. And then, what type of…

Contents