Super Simple CSS animation for "fade in" on page load 👻

You've probably seen this one before...some websites have that really nice animation where things just fade in when you load the page. There are plenty of libraries out there that can help you achieve this, but if you just want to use a CSS approach, then you can try this out:

@keyframes fadeInUp {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}

.fadeInUp-animation {
  animation: 1.5s fadeInUp;
}

Keyframes

• Using @keyframes, we can create our animation (I've called this 'fadeInUp' but you can call it what you want) and decide what you want it to do.
• So I want a transform animation because I want to make something move.
• I use translateY to move it along the Y axis and initially I want it to be pushed down from its initial position and I want it to be transparent (opacity: 0).
• Then as it moves up the axis, it will become visible (opacity: 1).

Create the class

• Then I created the .fadeInUp-animation class, which lets me control the speed of the animation.
• You can then attach this class to any element you want to be animated, like text, an image, or even a whole div!

Have a play around and see what else you can do with it :)

Some more places you can learn about CSS animations

• MDN docs
• CSS Tricks
• W3 Schools