DEV Community

Cover image for Super Simple CSS animation for "fade in" on page load ๐Ÿ‘ป
Tia Eastwood
Tia Eastwood

Posted on


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;
Enter fullscreen mode Exit fullscreen mode


  • 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

Top comments (0)

Super Useful CSS Resources

A collection of 70 hand-picked, web-based tools which are actually useful.
Each will generate pure CSS without the need for JS or any external libraries.