无js的菜单栏收缩与折叠动画

菜单栏收缩主要使用下面的样式实现

nav:hover,nav:focus-within{
   transform:translateX(100%)
}

折叠面板动画

details[open] summary ~ *{
  animation:sweep .5s ease-in-out
}
@keyframs sweep{
  0% {opcity:0;margin-left:-10px}
  100% {opcity:100;margin-left:0px}
}