title: CSS animation - 0 to 100 and back to 0
body: <p>I set a div of a dropdown to have an animation as below and this happens when div opens up:</p>
  
  <pre><code>.locationDropdownList {
    position: absolute;
    top: 83px;
    width: 100%;
    background: white;
    z-index: 1000;
    padding: 0 1rem 1rem 1rem;
    animation: dropdown 250ms ease-in-out;
    box-shadow: 0px 30px 25px 0px rgba(0, 0, 0, 0.2);
    max-height: 250px;
    overflow-x: hidden;
  }
  
  @keyframes dropdown {
    0% {
      opacity: 0;
    }
  
    100% {
      opacity: 1;
    }
  }
  </code></pre>
  
  <p>It works when it opens but how can I also set it when it is closing? I tried adding 0% underneath 100% but that didn't do anything. Any suggestions on this?</p>
  
  <p>Update:</p>
  
  <p>So how it works is like below</p>
  
  <p>I have a parent of the div called <code>LocationDropdown</code> and when that is clicked, a class called <code>focused</code> is applied to the parent which then activates the dropdown to open <code>locationDropdownList</code> which is a div that holds the list</p>
  
  <pre><code>&lt;div class="LocationDropdown"&gt;
    &lt;div&gt;
      &lt;p class="locationSelectText"&gt;London&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>when clicked focused class is applied</p>
  
  <pre><code>&lt;div class="LocationDropdown focused"&gt;
    &lt;div&gt;
      &lt;p class="locationSelectText"&gt;London&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="locationDropdownList"&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;/li&gt;
         .....
         .....
        &lt;/ul&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;/li&gt;
        .....
        .....
      &lt;/ul&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;/li&gt;
         .....
         .....
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>