How to Add Sidebar Menu Animation in Shopify Store?

1. Go to base.css and paste below CSS code at the bottom:

.menu-drawer__menu.has-submenu.list-menu > li,
ul.has-submenu.list-menu ul.list-menu > li {
    opacity: 0;
    border-bottom: 1px solid #555;
    -webkit-transform: translateY(10px);
    -moz-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px);
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.menu-drawer-container.menu-opening .menu-drawer__menu.has-submenu.list-menu > li,
ul.has-submenu.list-menu.submenu-open ul.list-menu > li {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}


.menu-drawer-container.menu-opening .menu-drawer__menu.has-submenu.list-menu > li:first-child,
ul.has-submenu.list-menu.submenu-open ul.list-menu > li:first-child {
  -webkit-transition-delay: .1s;
    -moz-transition-delay: .1s;
    -o-transition-delay: .1s;
    transition-delay: .1s;
}

.menu-drawer-container.menu-opening .menu-drawer__menu.has-submenu.list-menu > li:nth-of-type(2),
ul.has-submenu.list-menu.submenu-open ul.list-menu > li:nth-of-type(2){
  -webkit-transition-delay: .2s;
    -moz-transition-delay: .2s;
    -o-transition-delay: .2s;
    transition-delay: .2s;
}

.menu-drawer-container.menu-opening .menu-drawer__menu.has-submenu.list-menu > li:nth-of-type(3),
ul.has-submenu.list-menu.submenu-open ul.list-menu > li:nth-of-type(3) {
  -webkit-transition-delay: .3s;
    -moz-transition-delay: .3s;
    -o-transition-delay: .3s;
    transition-delay: .3s;
}

.menu-drawer-container.menu-opening .menu-drawer__menu.has-submenu.list-menu > li:nth-of-type(4),
ul.has-submenu.list-menu.submenu-open ul.list-menu > li:nth-of-type(4) {
  -webkit-transition-delay: .4s;
    -moz-transition-delay: .4s;
    -o-transition-delay: .4s;
    transition-delay: .4s;
}

.menu-drawer-container.menu-opening .menu-drawer__menu.has-submenu.list-menu > li:nth-of-type(5),
ul.has-submenu.list-menu.submenu-open ul.list-menu > li:nth-of-type(5) {
  -webkit-transition-delay: .5s;
    -moz-transition-delay: .5s;
    -o-transition-delay: .5s;
    transition-delay: .5s;
}

.menu-drawer-container.menu-opening .menu-drawer__menu.has-submenu.list-menu > li:nth-of-type(6),
ul.has-submenu.list-menu.submenu-open ul.list-menu > li:nth-of-type(6) {
  -webkit-transition-delay: .6s;
    -moz-transition-delay: .6s;
    -o-transition-delay: .6s;
    transition-delay: .6s;
}

.menu-drawer-container.menu-opening .menu-drawer__menu.has-submenu.list-menu > li:nth-of-type(7),
ul.has-submenu.list-menu.submenu-open ul.list-menu > li:nth-of-type(7) {
  -webkit-transition-delay: .7s;
    -moz-transition-delay: .7s;
    -o-transition-delay: .7s;
    transition-delay: .7s;
}
.menu-drawer-container.menu-opening .menu-drawer__menu.has-submenu.list-menu > li:nth-of-type(9),
ul.has-submenu.list-menu.submenu-open ul.list-menu > li:nth-of-type(8) {
  -webkit-transition-delay: .8s;
    -moz-transition-delay: .8s;
    -o-transition-delay: .8s;
    transition-delay: .8s;
}
.menu-drawer-container.menu-opening .menu-drawer__menu.has-submenu.list-menu.submenu-open > li {
    transform: inherit !important;
      transition-delay: inherit !important;
      transition: inherit !important;
}


.menu-drawer-container.menu-opening .menu-drawer__menu.has-submenu.list-menu>li,
ul.has-submenu.list-menu.submenu-open ul.list-menu>li {
  border: none;
}