2 Pragmatic CSS Animations You can do Right Now
Tags: beginners, css, html, webdev
Published: 2019-11-25 22:33:02

## 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](#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](https://medium.com/@marklchaves/cloudcannon-versus-wordpress-e0ff63fdb4c0). 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&mdash;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

<del>Surprisingly</del> Astonishingly, almost everything that came up was overkill&mdash;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 <a name="the-code"></a>

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

{% codepen https://codepen.io/marklchaves/pen/WNNWmEz default-tab=css,result %}

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
/* 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
<!-- 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&mdash;no fancy highlighting or alignment.

```css
/* 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
<!-- 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](https://caughtmyeye.dev/photography/people/) on my People portfolio page.

## References

CSS Animations on [The Mozilla Developer Network (MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations)