Creating a Slide Up and Slide Down Effect using CSS

CSS animations do rock according to me when compared to other kinds of web animation. I love those just for the fact that they are pure CSS. But still a few of those CSS animations are not completely pure CSS. They need JavaScript to handle some stuff. In this post we will be seeing on how to create a simple CSS slide up and slide down animation. So lets get started.

YOU MIGHT ALSO LIKE : CREATE YOUR FIRST CSS ANIMATION

The HTML Part :

The first thing of course is that you need to create the stuff that you need to animate. In this case we would be creating a simple HTML div that has a background color of black or whichever you prefer. Just add the following code to create the element and about the background color we would be dealing that with CSS.

<div class="slide" id = "slide">Random Stuff in here.</div> 

CSS :

And so now lets get started with the fun part. Add the following CSS stylings to your page. This basically adds a CSS transformation that lets you to animate the div that we created in HTML.

.slide {
overflow-y: hidden;
max-height: 500px; /* approximate max height */
width: 200px;
height: 200px;
background-color: red;
transition-property: all;
transition-duration: .5s;
transition-timing-function: cubic-bezier(1, 1, 1, 1);
}
.slide.closed {
max-height: 0;
}

The basic concept behind this is that we are just adding an additional class the div when we click on a button that we are about to create. This can be done using JavaScript. And so just add the following code and you would get the complete finished product.

<button onclick="document.getElementById('slide').classList.toggle('closed');">Click Me !</button>

And so that is it ! Happy Animating :)

Tweet