html - 当您将鼠标移开时，如何反转下拉菜单的动画？

Question

我正在制作一个下拉菜单，当鼠标悬停在菜单选项卡上时它会在屏幕上飞行，但当我将鼠标移出选项卡或下拉菜单时似乎无法让它反转动画并返回屏幕外。

我已经尝试过 animation-direction 和 animation-iteration-count 等动画属性，但似乎都不起作用。

这是 HTML:

<div id="menu"> <!--The menu bar-->
    <ul class="menulist"> <!--The list in the menu which has the tabs-->
        <li id="menutab"> <!--One of the tabs-->
            <a class="menulinks">tab 1</a> <!--The tab text-->
            <div class="dropdown-content"> <!--The dropdown menu with all the links-->
                <a>link 1</a>
                <a>link 2</a>
                <a>link 3</a>
            </div>
        </li>
    </ul>
</div>

这是有问题的缩短的 css。完整代码在这里:https://codepen.io/PercyCho/pen/PMqgEg

.dropdown-content {
    display: none;
    position: absolute;
    background-color: blue;
    min-width: 260px;
    margin-top: 19px;
    z-index: 1;
  /*is there a property or animation that I can put here to reverse the animation once I mouse off of it?*/
    animation-name: dropdown-slide;
    animation-duration: 0.35s;
}

@keyframes dropdown-slide{
    from{transform: translate(-1500px, 0px);} /*-1500px just means off the screen*/
    to{transform: translate(0px, 0px);}/*which then makes it come onscreen */
}

li#menutab:hover .dropdown-content {
    display: block;
}

Answer 1

您不需要动画来获得所需的结果...只需在 transition 上使用带有持续时间的 transform 属性即可:

.dropdown-content {
    position: absolute;
    transform: translate(-1500px, 0px);
    transition : .35s all;
    background-color: blue;
}

li#menutab:hover .dropdown-content {
transform: translate(0px, 0px)
}

检查这个codepen