将垂直幻灯片动画添加到导航栏-仅CSS

如何解决将垂直幻灯片动画添加到导航栏-仅CSS

导师向我挑战，要在沙箱型项目中仅使用CSS和HTML将垂直的幻灯片动画添加到导航栏中。在这一点上，我已经尝试了无数种方法，并且需要一些帮助-至少在某些方向上。 我尝试过：几个动画名称，transform和translation3d，在其轴上移动元素并旋转等。

.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.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版本）：

• @slidein规则的关键帧定义
• 具有各种调整/配合的过渡声明
• 具有各种调整/动画效果的动画声明

编辑/更新：

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

解决方法

Here's another question包含一些有用的信息，可以帮助您找到答案。

我还找到了this article helpful。

以下代码段是解决问题的一种方法。我将指出先前的实现过程中的两个关键问题：

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>