2 Pragmatic CSS Animations You can do Right Now

Intro

This is a quick how-to for creating two practical CSS animations.

1. Fade In
2. Slide Up

TL;DR show me the code

Motivation

There's a story of why I'm writing this minimalist how-to. I'm right in the middle of migrating my WordPress site to CloudCannon. That means I'm back to writing code instead of clicking lots of buttons and waiting for slow page refreshes. Yes, that's a good thing.

Anyway, I wanted to give my CloudCannon site some dynamic "umph". I wanted to use similar animations that my WordPress theme provides via button clicks—such as a simple fade in and slide up.

So, I needed to find the CSS code to do that. I went to my "usual suspects".

1. CSS-Tricks
2. CodePen
3. MDN
4. W3Schools
5. And even here on DEV

Surprisingly Astonishingly, almost everything that came up was overkill—not practical. Needless to say, I didn't find one live demo of CSS code to do a fade in or a slide up.

No problem. Let's write some code.

The Code

Here's all I needed! This is freely available on CodePen. "Knock yourself out!"

Note: Please log in to your CodePen account to view if the pen doesn't show up at first.

1) Subtle Fade In

Here's the CSS (sans fancy styling) and HTML for the first fade-in from the CodePen above.

/* CSS */

/* Fade in Once for Three Seconds */
.fade-in-1 {
  animation: 3s 1 fadeIn; /* Do the Fade. */
}

/* The fading in part. Reused above. */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<!-- HTML -->

<h3 class="fade-in-1">Fade in Once for Three Seconds</h3>

The second fade in might be over the top. I added it for kicks to show that you can specify how many times to play the animation.

You can even let it run forever. But, let's not over do it.

2) Slide Up

There's more CSS here. Again, the CSS and HTML are stripped down—no fancy highlighting or alignment.

/* CSS */

/* Slide up Ease in Once for Three Seconds with Two Second Delay */
.slide-up-1-ease {
  opacity: 0; /* Be invisible first. */
  animation: 3s ease-in 2s 1 slideUp; /* Do the Slide. */
  /* This ensures that the item to be animated 
     is hidden at the beginning, then stays
     visible at the end (persists).*/
  animation-fill-mode: forwards;  
}

/* The sliding up part. Reused above. */
@keyframes slideUp{
  0% {
    opacity:0;
    transform:  translate(0px,25px)  ;
  }
  100% {
    opacity:1;
    transform:  translate(0px,0px)  ;
  }
}

<!-- HTML -->

<h3 class="slide-up-1-ease">Slide up Ease in Once for Three Seconds with Two Second Delay</h3>

In the Wild

Subtle heading (h1) fade in on my People portfolio page.

References

CSS Animations on The Mozilla Developer Network (MDN)