CSS动画 - 0到100并返回0

Question

我设置了一个下拉列表的div来生成如下动画，当div打开时会发生这种情况：

.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;
  }
}

它在打开时有效，但如何在关闭时设置它？我尝试在100％以下添加0％但是没有做任何事情。有什么建议吗？

更新：

它是如何工作的如下

我有一个名为LocationDropdown的div的父级，当点击它时，一个名为focused的类被应用于父级，然后激活下拉列表以打开locationDropdownList，这是一个保存列表的div

<div class="LocationDropdown">
  <div>
    <p class="locationSelectText">London</p>
  </div>
</div>

单击焦点类时应用

<div class="LocationDropdown focused">
  <div>
    <p class="locationSelectText">London</p>
  </div>
  <div class="locationDropdownList">
    <ul>
      <li></li>
       .....
       .....
      </ul>
    <ul>
      <li></li>
      .....
      .....
    </ul>
    <ul>
      <li></li>
       .....
       .....
    </ul>
  </div>
</div>

Answer 1

这是你的意思吗？

.locationDropdownList {
  position: absolute;
  top: 83px;
  width: 100%;
  background: white;
  z-index: 1000;
  padding: 0 1rem 1rem 1rem;
  animation: dropdown 1s ease-in-out infinite;
  box-shadow: 0px 30px 25px 0px rgba(0, 0, 0, 0.2);
  max-height: 250px;
  overflow-x: hidden;
}

@keyframes dropdown {
  0% {
    opacity: 0;
  }
  
  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

<div class="LocationDropdown focused">
  <div>
    <p class="locationSelectText">London</p>
  </div>
  <div class="locationDropdownList">
    <ul>
      <li></li>
       .....
       .....
      </ul>
    <ul>
      <li></li>
      .....
      .....
    </ul>
    <ul>
      <li></li>
       .....
       .....
    </ul>
  </div>
</div>