向导航栏添加垂直幻灯片动画 - 仅限 CSS

Question

我的导师要求我在仅使用 CSS 和 HTML 的沙盒类型项目中向导航栏添加垂直幻灯片动画。在这一点上，我已经尝试了无数的事情，需要一些帮助——至少是一些方向。 我尝试过：几个动画名称、transform 和 translate3d、在其轴上移动元素和旋转等。

.collapsible-menu label {
    font-family: 'Chiller';
    font-size: 70px;
    display: block;
    cursor: pointer;
    background: url(C:/Users/audre/workspace/basic/assets/menu.png) no-repeat left center;
    background-size: 15%;
    padding: 10px 0px 0px 50px;
}

input#menu {
    display: none;
}

.menu-content {
    max-height: 0;
    font-family: 'Oswald', sans-serif; 
    padding: 0 0 0 50px;
    animation: 3s linear running slidein;
}

/* Toggle Effect */
input:checked +label {
    background-image: url(C:/Users/audre/workspace/basic/assets/cancel.png);  
}

input:checked ~ .menu-content {
    max-height: 100%;
}
/*Icons made by https://www.flaticon.com/authors/cole-bemis from www.flaticon.com/ */

.collapsible-menu {
    background-color: rgb(255, 255, 255);
    padding: 0px 30px;
    width: 200px;
    border-bottom: 3px solid #490000;
    box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
    z-index: 5;
}

.collapsible-menu ul {
    list-style-type: none;
    padding: 0;
}

.collapsible-menu a {
    display: block;
    padding: 10px;
    text-decoration: none;
}

 <div class="collapsible-menu">
        <input type="checkbox" id="menu">
        <label for="menu">Menu</label>
        <nav class="menu-content">
            <ul>
                <li><a class="active" href="#home"></a>Home</li>
                <li><a href="./about.html" target="_blank"></a>About Audrey</li>
                <li><a href="#shop"></a>Shop</li>
                <li><a href="#contact"></a>Contact</li>
            </ul>
        </nav>
    </div>

非常感谢任何帮助或提示！我在这里有点不知所措。

我尝试过的（cliffnotes 版本）：

• “幻灯片”规则的@keyframes 定义
• 带有各种调整/玩弄的过渡声明
• 具有各种调整/玩弄的动画声明

编辑/更新：

• 将代码编辑为最​​小的可重现示例
• 清理了不必要的声明代码
• 添加了迄今为止我尝试过的内容的摘要

Answer 1

Here's another question 提供一些有用的信息，可以帮助提供答案。

我还找到了this article helpful。

下面的 sn-p 是解决您的问题的一种方法。我要指出之前实施的两个关键问题：

1. 它尝试使用名为 slideIn 的 CSS 动画，但动画未定义。
2. 当在 max-height 属性上使用 transition 而不是动画时，至少对我来说，max-height: 100%; 的目标值不起作用。我必须以像素为单位指定它。

.collapsible-menu label {
  display: block;
  cursor: pointer;
}

input#menu {
  display: none;
}

.menu-content {
  max-height: 0;
  overflow-y: hidden;
}

input:checked~.menu-content {
  max-height: 1000px;
  transition: max-height 5s linear;
}

.collapsible-menu {
  width: 200px;
  border-bottom: 3px solid #490000;
}

.collapsible-menu ul {
  list-style-type: none;
  padding: 0;
}

.collapsible-menu a {
  display: block;
}

<div class="collapsible-menu">
  <input type="checkbox" id="menu">
  <label for="menu">Menu</label>
  <nav class="menu-content">
    <ul>
      <li>
        <a href="#shop"></a>Shop</li>
      <li>
        <a href="#shop"></a>Shop</li>
      <li>
        <a href="#shop"></a>Shop</li>
      <li>
        <a href="#shop"></a>Shop</li>
      <li>
        <a href="#shop"></a>Shop</li>
      <li>
        <a href="#shop"></a>Shop</li>
      <li>
        <a href="#shop"></a>Shop</li>
      <li>
        <a href="#shop"></a>Shop</li>
    </ul>
  </nav>
</div>