我玩這個(gè)已經(jīng)有一段時(shí)間了，正在尋求幫助。只是一個(gè)基本的Bootstrap 5下拉菜單:

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown button
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
</div>

使用以下css:

@media (min-width: 992px) {
      .dropdown-menu {
        animation-duration: 0.4s;
        -webkit-animation-duration: 0.4s;
        animation-fill-mode: both;
        -webkit-animation-fill-mode: both;
        -webkit-animation-name: slideIn;
        animation-name: slideIn;
      }
    }

    @keyframes slideIn {
      0% {
        transform: translateY(1rem);
        opacity: 0;
      }

      100% {
        transform: translateY(0rem);
        opacity: 1;
      }

      0% {
        transform: translateY(1rem);
        opacity: 0;
      }
    }

    @-webkit-keyframes slideIn {
      0% {
        -webkit-transform: transform;
        -webkit-opacity: 0;
      }

      100% {
        -webkit-transform: translateY(0);
        -webkit-opacity: 1;
      }

      0% {
        -webkit-transform: translateY(1rem);
        -webkit-opacity: 0;
      }
    }

導(dǎo)致下拉列表向上滑動(dòng)以完全覆蓋下拉按鈕。(https://i.stack.imgur.com/rglLE.png)

有人能指出我在這里做錯(cuò)了什么嗎？使用關(guān)鍵幀來制作動(dòng)畫比只使用css轉(zhuǎn)場有什么好處嗎？

@keyframes和@-webkit-keyframes中有重復(fù)的0%初始狀態(tài)聲明。你可以試著移除它，看看它是否有效。