title: How do I add an animation to this accordion?
body: <p>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 <a href="https://daneden.github.io/animate.css/" rel="nofollow noreferrer">https://daneden.github.io/animate.css/</a></p>
  
  <p>In this accordion that I found online
  <a href="http://cssdeck.com/labs/5jlzqlt6" rel="nofollow noreferrer">http://cssdeck.com/labs/5jlzqlt6</a></p>
  
  <p>What I tried.
  I tried channging the </p>
  
  <pre><code>.accordion:target{display:block;}
  </code></pre>
  
  <p>From this</p>
  
  <pre><code>#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;}
  </code></pre>
  
  <p>To this..</p>
  
  <pre><code>#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;}
  </code></pre>
  
  <p>I tried playing around with it but nothing seems to work.
  How do I do this in a propper way?</p>
  
  <p><br></p>
  
  <p><strong>EDIT</strong><br>
  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</p>
  
  <p>This is the one I changed</p>
  
  <pre><code>.accordion:target{-webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; height: 100px}
  </code></pre>
  
  <p>And as you can see the boxes doesnt change size tot he amount of text there is.
  the last one is overflowing.
  <a href="https://i.imgur.com/D1BpaPO.gifv" rel="nofollow noreferrer">https://i.imgur.com/D1BpaPO.gifv</a></p>
  
  <p><a href="https://jsfiddle.net/r6f6jbvy/" rel="nofollow noreferrer">https://jsfiddle.net/r6f6jbvy/</a></p>