Intro
This is a quick how-to for creating two practical CSS animations.
- Fade In
- Slide Up
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".
- CSS-Tricks
- CodePen
- MDN
- W3Schools
- 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)
Top comments (0)