CSS动画-0到100和返回到0

我将下拉列表中的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>

伦敦



.....
.....



.....
.....



.....
.....

这是你的意思吗


.locationDropdownList{
位置：绝对位置；
top:83px；
宽度：100%；
背景：白色；
z指数：1000；
填充：0 1rem 1rem 1rem；
动画：下拉1s轻松输入输出无限；
盒影：0px 30px 25px 0px rgba（0,0,0,0.2）；
最大高度：250px；
溢出x：隐藏；
}
@关键帧下拉列表{
0% {
不透明度：0；
}
50% {
不透明度：1；
}
100% {
不透明度：0；
}
}

伦敦



.....
.....



.....
.....



.....
.....

简单的转换就可以了。如果添加类（或打开：hover/：focus/：active选择器）打开div，则需要将其设置为默认样式。如何切换样式？你能澄清你的问题吗？正如代码所示，没有任何东西说明这种样式是如何应用的。我尝试过，并将其应用于从最大高度到保存列表的div的过渡，但它不起作用，我不知道为什么。以下是我对过渡和不透明度或最大高度的意思；）@G-Cyr我试过你们的解决方案——它根本并没有应用过渡，但当我检查并打开和关闭不透明度时，它正在做我想做的事情。我的意思是当下拉菜单关闭时，它不是平滑的。打开的时候很顺，我不明白你的意思。请多解释。