Css 如何播放“悬停关闭”的反向关键帧动画？

我正在尝试构建一个下拉菜单，首先下拉菜单向下滑动，然后从底部逐个显示菜单项。在悬停状态下，它看起来不错，但我不知道如何在悬停状态下平稳播放。我要做的是先隐藏第二个子菜单项，然后隐藏第一个子菜单项，然后下拉列表向上滑动

我尝试的是在下拉列表中添加默认延迟的隐藏动画关键帧，并添加延迟为0的悬停显示动画。但正如你们所看到的，它不能正常工作。（而且它也会在页面加载时产生动画，这对我不好）

---

（使用SCSS）

正如我在对问题的评论中指出的那样，产生动画的反向效果总是很复杂的。这不是不可能的，只是它需要额外的编码（比如额外的关键帧）和调整所有相关的属性来实现完美的效果

如果还需要实现反向效果，则使用

转换

是最佳选择。这是完全可能产生的效果，你是在使用过渡，这是非常类似于你如何做它与动画。在

：悬停

选择器中，应用

转换

设置，使

：第一个子项

的延迟低于第二个子项（以及后续子项），使其显示在第一位，并在默认选择器中应用

转换

设置，使

：第一个子项

的延迟高于其他子项

使用转换还可以避免动画显示在页面加载本身上。这是因为只有当状态从一个状态更改为另一个状态时，才会发生转换

正文{
背景#f1f1；
}
保险商实验室{
高度：100px；
位置：相对位置；
背景：#fff；
}
ulli{
显示：块；
浮动：左；
保证金：0；
列表样式类型：无；
填充：0；
}
ullia{
显示：块；
高度：100px；
线高：100px；
填充：0 20px；
}
ul li ul{
位置：绝对位置；
左：0px；
右：0px；
顶部：100px；
高度：0px；
不透明度：0；
可见性：隐藏；
过渡：所有1s 0.5s；
}
ulli ulli{
位置：绝对位置；
左：50px；
底部：0px；
宽度：200px；
溢出：隐藏；
高度：100px；
}
ul li ul li a{
显示：块；
高度：100px；
背景：红色；
填充：0 20px；
位置：绝对位置；
不透明度：0；
转换：转换（0px，100px）；
过渡：所有1s 0.2s；
}
第一个孩子{
过渡延迟：0.4s；
}
最后一个孩子{
左：250px；
}
最后一个孩子{
过渡延迟：0.2s；
}
ul-li：悬停ul{
高度：100px；
不透明度：1；
能见度：可见；
转换：所有1s 0；
}
ul li：悬停ul li a{
不透明度：1；
转换：转换（0px，0px）；
过渡：所有1s 0.2s；
}
ul li:悬停ul li:最后一个孩子a{
过渡延迟：0.4s；
}

有时更容易使用

动画方向：交替以反转当前动画。
要使动画产生反转效果总是非常复杂的。为什么不使用转换呢？因为我想一个接一个地显示项目，所以一切都有一点延迟。因此，当我悬停时，最后一个项目有1s延迟，但在悬停关闭时，它应该是第一个隐藏的项目。不确定这是否可以通过过渡实现。谢谢！我在Safari的第一个子项上有个问题。。。在Chrome中运行良好，我将尝试找到解决方案。好的，如果我有Safari，我会在这方面帮助你。@passatgt:我也知道你的原始动画无法正常运行的原因。
ul li ul {
  -webkit-animation: hideDropdown 1s;
  -webkit-animation-delay: 0.5s;
}

ul li:hover ul {
  -webkit-animation: showDropdown 1s forwards;
  -webkit-animation-delay: 0s;
}