将垂直滑动动画添加到导航栏 - CSS ONLY

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

“slidein”规则的@keyframes 定义
带有各种adjustments/toying的转换声明与
动画声明与各种adjustments/toying围绕着

EDITS/UPDATES:

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

Answer 1

Here's another question 以及一些有助于提供答案的有用信息。

我还找到了this article helpful。

以下代码段是解决您的问题的一种方法。我要指出先前实施的两个关键问题：

它正在尝试使用名为 slideIn 的 CSS 动画，但该动画未定义。
当在 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>

将垂直滑动动画添加到导航栏 - CSS ONLY

Adding Vertical Slide Animation to Navigation Bar - CSS ONLY

css

animation

menu

css-animations

nav