Javascript 汉堡按钮上的反向动画

我正在尝试制作汉堡按钮的动画。问题是，动画只在第一次单击时效果很好，我不知道如何使第二次单击执行反向动画。我不确定是否可以在不使用关键帧的情况下完成此操作。css中的括号未格式化，因为它是从SCS编译而来的

var hamburger=document.getElementById（“hamburger”）；
var nav_items=document.getElementsByClassName（“nav items”）[0]；
var line1=document.getElementsByClassName（“line1”）[0]；
var line2=document.getElementsByClassName（“line2”）[0]；
var line3=document.getElementsByClassName（“line3”）[0]；
hamburger.addEventListener（“单击”，函数（）{
导航项.classList.toggle（“导航打开”）；
line1.classList.toggle（“第一行”）；
line2.classList.toggle（“中间隐藏行”）；
行3.classList.toggle（“最后一行”）；
});
正文{
背景色：白色；
保证金：0；
填充：0；
}
#导航栏{
位置：固定；
排名：0；
宽度：100%；
高度：100px；
颜色：白色；
z指数：100；
背景颜色：蓝色；
}
#标志{
位置：绝对位置；
最高：50%；
左：25px；
转化：translateY（-50%）；
字体大小：25px；}
#标志a{
文字装饰：无；
颜色：白色；}
#标志a：：之后{
内容：“；
位置：绝对位置；
底部：0；
左：0；
高度：5px；
宽度：100%；
背景颜色：黄色；
z-索引：-1；}
.导航项目{
位置：固定；
排名：0；
左：0；
宽度：100vw；
高度：100vh；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
可见性：隐藏；
证明内容：中心；
字号：2rem；
背景色：黑色；}
.导航项目a{
文字装饰：无；
颜色：白色；
边距：15px 0；}
.nav项目a：第一个孩子{
页边距顶部：0；}
.导航项目a：悬停{
颜色：黄色；}
#汉堡包{
高度：40px；
宽度：40px；
背景色：透明；
边框：0px实心透明；
填充：0；
位置：绝对位置；
右：80px；
最高：50%；
转化：translateY（-50%）；
z指数：100；
}
#汉堡包，第1行，
#汉堡包，第二行，
#汉堡包，第三行{
位置：绝对位置；
左：0；
高度：5px；
宽度：100%；
背景色：白色；
边界半径：25px；
过渡：0.5s线性；}
#汉堡包，第1行{
顶部：3px；}
#汉堡包，第二行{
最高：50%；
转换：translateY（-50%）；}
#汉堡包，第三行{
底部：3px；}
.导航打开{
可见性：可见；}
.中间线隐藏{
动画：汉堡中线0s直线；
动画填充模式：正向；
动画延迟：0.3s；}
.一线{
动画：汉堡包一线0.5s；
动画填充模式：向前；}
.最后一行{
动画：汉堡包最后一行0.5s；
动画填充模式：向前；}
@汉堡中线关键帧{
从{
可见性：可见；}
到{
可见性：隐藏；}}
@汉堡包第一行的关键帧{
0% { }
50% {
最高：50%；
转换：translateY（-50%）；}
100% {
最高：42%；
变换：旋转（45度）；}
@汉堡包最后一行的关键帧{
0% { }
50% {
底部：50%；
转换：translateY（50%）；}
100% {
底部：45%；
变换：旋转（-45度）；}}

文件
最简单的方法是在css中将动画指定给一个类，例如，带有开头动画的.openedhamburger

现在创建分配给其他类的其他动画，例如.closedhamburger和关闭动画

最后，使用javascript将类转换为元素，这样，每当分配不同的类时，就会触发适当的动画

编辑：另外，尽管在您的情况下使用两步动画，因此这不适用，但要知道，使用此类方法，如果启用平滑过渡，有时你甚至可以不用任何动画就可以做到：只需将两种状态下的元素的位置和旋转关联起来，然后因为启用了平滑变换，动画就会出现。
请查看此处的第二个片段：。。我是在悬停状态下做的，但你可以在单击时更改它