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

#css #webdev #beginners #tutorial

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

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.