移动设备上的CSS过渡性能问题

Question

我正在我的个人投资组合网站上工作，并且在移动设备上的菜单动画方面存在性能问题。 Here is the link to my portfolio

当点击一个汉堡图标时，动画列表项出现时，动画变得不连贯。 下面提供了代码，github链接here 另外，非常感谢有关项目等的反馈。

//Show menu on hamburger click
const navigation = 'nav';
const navTrigger = '.navTrigger';
const navItem = '.nav__item';
const full = '.fullpage';

const menu = document.querySelector(navTrigger);
const nav = document.querySelector(navigation);
const items = document.querySelectorAll(navItem);
const page = document.querySelector(full);

const handleMenu = (e) => {
    items.forEach(item => {
    item.classList.toggle('animateOnce');
});
    menu.classList.toggle('active');
    page.classList.toggle('blur');

};

nav.addEventListener('click',handleMenu);
nav.addEventListener('keydown',e => {
    if (e.keyCode === 13){
        handleMenu();
    }
});

page.addEventListener('click', () => {
    menu.classList.remove('active');
    items.forEach(item => item.classList.remove('animateOnce'));
    page.classList.remove('blur');
});

// Burger icon animation
@keyframes inM{
  50%{transform:rotate(0deg);}
  100%{transform:rotate(45deg);}
}
@keyframes outM{
  50%{transform:rotate(0deg);}
  100%{transform:rotate(45deg);}
}

@keyframes inT{
  0%{transform: translateY(0px) rotate(0deg);}
  50%{transform: translateY(9px) rotate(0deg);}
  100%{transform: translateY(9px) rotate(135deg);}
}

@keyframes outT{
  0%{transform: translateY(0px) rotate(0deg);}
  50%{transform: translateY(9px) rotate(0deg);}
  100%{transform: translateY(9px) rotate(135deg);}
}

@keyframes inBtm{
  0%{transform: translateY(0px) rotate(0deg);}
  50%{transform: translateY(-9px) rotate(0deg);}
  100%{transform: translateY(-9px) rotate(135deg);}
}

@keyframes outBtm{
  0%{transform: translateY(0px) rotate(0deg);}
  50%{transform: translateY(-9px) rotate(0deg);}
  100%{transform: translateY(-9px) rotate(135deg);}
}

// Nav item classes
.nav__item {
  text-align: right;
  margin-top: 25px;
  &:not(:first-child){
    margin-left: 0;
  }
  opacity: 0;
  visibility: hidden;
  transform: translateY(70px);
  transition: all 0.7s ease;
  &.animateOnce {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  @for $i from 1 through 3 {
    &:nth-child(#{$i}) {
      transition-delay: 200ms * $i;
    }
  }
}


//Blur class for the body
.blur {
  transition: all 0.4s ease-in-out;
  filter: blur(2px) grayscale(100%);
}

<nav>
        <div class="navTrigger" tabindex=1>
            <i></i><i></i><i></i>
        </div>
        <ul class="nav__menu">
            <li class="nav__item"><a href="#projects">Projects</a></li>
            <li class="nav__item"><a href="#stack">Stack</a></li>
            <li class="nav__item"><a href="#contact">Contact</a></li>
        </ul>
    </nav>