Javascript 我如何给我的汉堡包菜单动画？

我想给我的汉堡菜单动画。我想在单击汉堡菜单图标时添加“卷展栏”动画，在单击子菜单项时添加“缩放”动画。我知道我需要在菜单中用id名称替换动画类名，但我不知道是哪一个

谢谢

$（文档）.ready（函数（）{
$（'.icon'）。在（'click'，function（）上{
$（“#菜单”）.toggle（）；
});
$（'#菜单a'）。在（'单击'，函数（）上）{
$（this）.sides（'.submenu'）.toggle（）；
});
});
.bar1、.bar2、.bar3{
宽度：35px；
高度：5px；
背景色：#333；
利润率：6px0；
}
.图标{
宽度：35px；
保证金：自动；
}
*{字体系列：“Segoe UI”，塔荷马；}
ul#菜单>li{
宽度：100%；
显示：块；
}
ul#菜单>li>ul子菜单{
显示：无；
列表样式类型：无；
保证金：0；
填充：0；
}
菜单{
显示：无；
列表样式：无；
保证金：0；
填充：0；
文本对齐：居中；
}
菜单a{
显示：块；
文字装饰：无；
颜色：黑色；
填充物：5px；
}
.子菜单{
}
@“关键帧”卷展栏{
从{
不透明度：1；
}
到{
不透明度：0；
-webkit变换：平移3D（100%，0，0）旋转3D（0，0，1，120度）；
变换：平移3d（100%，0，0）旋转3d（0，0，1，120度）；
}
}
.推出{
-webkit动画名称：卷展栏；
动画名称：卷展栏；
}
@关键帧缩放{
从{
不透明度：0；
-webkit转换：scale3d（0.3,0.3,0.3）；
变换：scale3d（0.3,0.3,0.3）；
}
50% {
不透明度：1；
}
}
.zoomIn{
-webkit动画名称：zoomIn；
动画名称：zoomIn；
}

斯特凡的菜单-2
















您的动画需要一个
动画持续时间
属性。

如果需要，可以更改
动画持续时间
格式4秒


$（文档）.ready（函数（）{
$（'.icon'）。在（'click'，function（）上{
$（“#菜单”）.toggle（）；
});
$（'#菜单a'）。在（'单击'，函数（）上）{
$（this）.sides（'.submenu'）.toggle（）；
});
});
.bar1、.bar2、.bar3{
宽度：35px；
高度：5px；
背景色：#333；
利润率：6px0；
}
.图标{
宽度：35px；
保证金：自动；
}
*{字体系列：“Segoe UI”，塔荷马；}
ul#菜单>li{
宽度：100%；
显示：块；
}
ul#菜单>li>ul子菜单{
显示：无；
列表样式类型：无；
保证金：0；
填充：0；
}
菜单{
显示：无；
列表样式：无；
保证金：0；
填充：0；
文本对齐：居中；
}
菜单a{
显示：块；
文字装饰：无；
颜色：黑色；
填充物：5px；
}
.子菜单{
}
@“关键帧”卷展栏{
从{
不透明度：1；
}
到{
不透明度：0；
-webkit变换：平移3D（100%，0，0）旋转3D（0，0，1，120度）；
变换：平移3d（100%，0，0）旋转3d（0，0，1，120度）；
}
}
.推出{
-webkit动画名称：卷展栏；
动画名称：卷展栏；
-webkit动画持续时间：4s；
动画持续时间：4s；
}
@关键帧缩放{
从{
不透明度：0；
-webkit转换：scale3d（0.3,0.3,0.3）；
变换：scale3d（0.3,0.3,0.3）；
}
50% {
不透明度：1；
}
}
.zoomIn{
-webkit动画名称：zoomIn；
动画名称：zoomIn；
-webkit动画持续时间：4s；
动画持续时间：4s；
}

斯特凡的菜单-2