我尝试做一个汉堡包菜单，使用关键帧显示菜单的元素。元素是不可见的，因为在我的css中有规则，但当菜单被单击时，首先显示可见，然后开始动画。我不知道错在哪里。

您可以在codepen中看到演示：https://codepen.io/carlos-turpin-trives/pen/yzqlybg

和代码:

 <div class="container"></div>
 <div class="button_container" id="toggle">
 <span class="top"></span><span class="middle"></span>
 <span class="bottom"></span>  
 </div>
 <div class="overlay" id="overlay">
</div>
<div class="containers">
<h1><span class="">reveal</span></h1>
<h1><span class="">reveal</span></h1>
<h1><span class="">reveal</span></h1>
</div></div>

CSS:

 <div class="container"></div>
 <div class="button_container" id="toggle">
 <span class="top"></span><span class="middle"></span>
 <span class="bottom"></span>  
 </div>
 <div class="overlay" id="overlay">
</div>
<div class="containers">
<h1><span class="">reveal</span></h1>
<h1><span class="">reveal</span></h1>
<h1><span class="">reveal</span></h1>
</div></div>

jQuery:

 <div class="container"></div>
 <div class="button_container" id="toggle">
 <span class="top"></span><span class="middle"></span>
 <span class="bottom"></span>  
 </div>
 <div class="overlay" id="overlay">
</div>
<div class="containers">
<h1><span class="">reveal</span></h1>
<h1><span class="">reveal</span></h1>
<h1><span class="">reveal</span></h1>
</div></div>

顺晟科技：