How do I add an animation to this accordion?

Question

So I found this awesome accordion on the internet and I wanted to make it even more awesome by working with animations. I'm very new to animations so I couldnt wrap my head around it. How would I use the SlideDown animation from https://daneden.github.io/animate.css/

In this accordion that I found online http://cssdeck.com/labs/5jlzqlt6

What I tried. I tried channging the

.accordion:target{display:block;}

From this

#accordion{margin:100px auto;width:400px;}
#accordion ul{list-style:none;margin:0;padding:0;}
.accordion{display:none;}
.accordion:target{display:block;}
#accordion ul li a{text-decoration:none;display:block;padding:10px;}
.accordion{padding:4px;}

To this..

#accordion{margin:100px auto;width:400px;}
#accordion ul{list-style:none;margin:0;padding:0;}
.accordion{display:none;}
.accordion:target{display:block; animation-name: bounce; transform-origin: center bottom;}
#accordion ul li a{text-decoration:none;display:block;padding:10px;}
.accordion{padding:4px;}

I tried playing around with it but nothing seems to work. How do I do this in a propper way?

EDIT
I got it working but there is a small issue.. My boxes can only fot 100px.. I tried changing it to auto but that removed the slide effect

This is the one I changed

.accordion:target{-webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; height: 100px}

And as you can see the boxes doesnt change size tot he amount of text there is. the last one is overflowing. https://i.imgur.com/D1BpaPO.gifv

https://jsfiddle.net/r6f6jbvy/

Answer 1

You can't animate element that has a display: none property. Here's a simple animation that animate opacity & height value

.accordion {
  opacity: 0;
  height: 0;
  transition: all 500ms ease;
  padding: 0;
}

.accordion:target {
  opacity: 1;
  height: 100px;
  padding: 4px;
}

If you want to use animate.css library, you need to use Javascript and add for example: .slideInUp along with .animated class to your element when user click it.

body {
  background: #d0d0d5;
}


/*  Basic stucture
=====================*/

#accordion {
  margin: 100px auto;
  width: 400px;
}

#accordion ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.accordion {
  opacity: 0;
  height: 0;
  transition: all 500ms ease;
  padding: 0;
}

.accordion:target {
  opacity: 1;
  height: 100px;
  padding: 4px;
}

#accordion ul li a {
  text-decoration: none;
  display: block;
  padding: 10px;
}


/*  Colors 
====================*/

#accordion ul {
  /*box-shadow*/
  -webkit-box-shadow: 0 4px 10px #BDBDBD;
  -moz-box-shadow: 0 4px 10px #BDBDBD;
  box-shadow: 0 4px 10px #BDBDBD;
  /*border-radius*/
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

#accordion ul li a {
  background: #fff;
  border-bottom: 1px solid #E0E0E0;
  color: #999;
}

.accordion {
  background: #fdfdfd;
  color: #999;
}

.accordion:target {
  border-top: 3px solid #FFCDCD;
}

<div id="accordion">
  <ul>
    <li>
      <a href="#one">Example one</a>
      <div id="one" class="accordion">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.
      </div>
    </li>
    <li>
      <a href="#two">Example two</a>
      <div id="two" class="accordion">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.
      </div>
    </li>
    <li>
      <a href="#three">Example three</a>
      <div id="three" class="accordion">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.
      </div>
    </li>
  </ul>
</div>

Answer 2

Use css height property and transition. Set height to zero to hide the element. Use different classes and change them with javascript.