利用动画制作渐隐式菜单

制作渐隐式菜单的动画，可以按照以下步骤进行：

1. 创建菜单按钮和菜单列表，设置菜单列表的初始状态为隐藏。

2. 在按钮的点击事件中，添加显示菜单列表的动画效果。可以使用CSS3中的transition或animation属性来实现。

3. 在菜单列表中添加鼠标移出事件，添加隐藏菜单列表的动画效果。

4. 如果需要实现多级菜单，可以在菜单项中添加子菜单，并在子菜单项中添加显示和隐藏的动画效果。

下面是一个简单的HTML/CSS示例代码，可以实现一个简单的渐隐式菜单动画效果：

HTML代码：

<button class="menu-btn">菜单</button>
<ul class="menu-list">
  <li><a href="#">菜单项1</a></li>
  <li><a href="#">菜单项2</a></li>
  <li class="has-submenu">
    <a href="#">菜单项3</a>
    <ul class="submenu">
      <li><a href="#">子菜单项1</a></li>
      <li><a href="#">子菜单项2</a></li>
    </ul>
  </li>
</ul>

CSS代码：

.menu-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 0;
  margin: 0;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,.3);
}
.menu-list li {
  list-style: none;
}
.menu-list a {
  display: block;
  padding: 10px;
  color: #333;
  text-decoration: none;
}
.has-submenu .submenu {
  display: none;
}
.has-submenu:hover .submenu {
  display: block;
  animation: fade-in .2s ease-in-out;
}
.submenu li {
  margin: 0;
}
.submenu a {
  padding: 5px 30px;
}
.menu-btn {
  display: block;
  padding: 10px;
  background-color: #333;
  color: #fff;
  border: none;
  cursor: pointer;
}
.menu-btn:hover {
  background-color: #444;
}
.menu-btn:focus + .menu-list,
.menu-list:hover {
  display: block;
  animation: fade-in .2s ease-in-out;
}
.menu-list:hover {
  animation-delay: .2s;
}
@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

这个示例代码实现了一个简单的渐隐式菜单动画效果，包括一级菜单和二级菜单。你可以根据自己的需要，进行修改和扩展。