Scroll-based Animations for WordPress

Recently my CSS Hero, Kevin Powell, did a video on CSS-only scroll-based animations. He, of course, goes deep into how these animations work and shows you all kinds of different ways you can use them.

But being the simple man that I am, what I really wanted was to have just a simple utility class I could use to make objects on my website fade in and up when they come into the viewport. So, I took what I learned from Kevin, played with the code a bit, and came up with a pretty simple CSS-only animation that achieves this effect.

In this video, I’m going to show you how to set it up and explain how all the code works (including a quick introduction to keyframe animations). If these types of subtle animations are something you’d like to be able to easily add to your websites, then stick around, and let’s get started!