如何制作流畅的侧面菜单动画。如何创建汉堡菜单的动画
我尝试了很多选择，但没有任何效果。我们需要为侧面菜单从左到右制作一个平滑的动画
我的代码
.left-menu {
display: block;
background-color: white;
width: 250px;
margin-left: 0;
height: 100%;
color: black;
text-align: left;
padding: 0;
margin: 0;
overflow: hidden;
transition: all 0.5s ease;
}
.left-menu ul {
padding-top: 10px;
overflow: hidden;
list-style-type: none; /* Забираємо маркери списку */
}
.left-menu ul li a {
overflow: hidden;
margin-left: 10px;
text-decoration: none; /* Прибираємо підкреслення з посилання */
color: black; /* Колір тексту чорний */
display: flex; /* Робимо, щоб посилання займало весь рядок */
padding: 10px;
font-size: 20px;
margin-bottom: 0;
line-height: 1;
transition: all 0.5s ease;
}
.left-menu ul li a:hover {
padding-left: 25px;
transition: all 0.5s ease;
}
.left-menu ul li {
overflow: hidden;
margin: 0;
padding: 0;
}
还有一个按钮，负责打开和关闭
发现
#burgerMenuBtn {
background-color: transparent;
border: none;
}
关闭 <button id="closeOverlay">
然后在打开和关闭的时候需要制作一个动画
侧面菜单默认隐藏，使用display:none;然后你需要在按下按钮时立即出现动画，即在关闭时从左飞到右，反之亦然。
如果你能帮忙我会很高兴，我非常迫切需要🙏🙏🙏
结果我没有动画，我尝试使用transform、transition、@keyframes，但没有帮助