页面加载时CSS动画图标异常显示及动画前闪现问题求助

• 页面加载时所有功能图标均可见，预期仅显示底部加号图标
• 首次点击加号展开再收缩后，图标消失；再次展开时图标会先闪现，再执行预期动画
• 已尝试调整keyframes中opacity与visibility的时序，以及添加页面加载时隐藏元素的类，但均未解决循环触发时的闪现问题

JS代码 #

const mobile_menu = (() => {
  const expandNavigation = (navButton, navBar, buttons) => {
    navButton.addEventListener('click', () => {
      let buttonType = ['slow', 'fast', 'fast', 'slow'];
      if (navButton.classList.contains('clicked')) {
        navButton.classList.add('unclicked');
        navButton.classList.remove('clicked');

        navBar.classList.add('retract');
        navBar.classList.remove('expand');

        for (let i = 0; i < buttons.length; i++) {
          showButton(buttons[i], buttonType, 'retract');
        }
      }
      else {
        navButton.classList.add('clicked');
        navButton.classList.remove('unclicked');
        
        navBar.classList.add('expand');
        navBar.classList.remove('retract');

        for (let i = 0; i < buttons.length; i++) {
          showButton(buttons[i], buttonType, 'expand');
        }
      }
    });
  }

  const showButton = (button, type, direction) => {
    if (direction === 'retract') {
      if (type === 'slow') {
        button.classList.remove('icon_appear_slow');
        button.classList.add('icon_vanish_slow');
      }
      else {
        button.classList.remove('icon_appear_fast');
        button.classList.add('icon_vanish_fast');
      }
    }
    else {
      if (type === 'slow') {
        button.classList.remove('icon_vanish_slow');
        button.classList.add('icon_appear_slow');
      }
      else {
        button.classList.remove('icon_vanish_fast');
        button.classList.add('icon_appear_fast');
      }
    }
  }

  return { expandNavigation };
})();

HTML代码 #

<div class="screen">
  <div class="page">Content</div>
  <div class="nav_menu">
    <span id="nav_bar"></span>
    <div class="nav_button">
      <i class = "material-icons call">call</i>
    </div>
    <div class="nav_button">
      <i class = "material-icons message">chat</i>         
    </div>
    <div class="nav_icon">
      <i id="open_close" class = "material-icons unclicked">add</i>
    </div>
    <div class="nav_button">
      <i class = "material-icons account">person</i>
    </div>
    <div class="nav_button">
      <i class = "material-icons settings">settings</i>
    </div>
  </div>
</div>

CSS代码 #

.icon_appear_slow {
  animation: grow 1s ease-in-out 2s 1 normal forwards;
}

.icon_appear_fast {
  animation: grow 2s ease-in-out 1s 1 normal forwards;
}

.icon_vanish_slow {
  animation: shrink 1s ease-in-out 2s 1 normal forwards;
}

.icon_vanish_fast {
  animation: shrink 2s ease-in-out 1s 1 normal forwards;
}

@keyframes grow {
  0% {
    transform: rotate(0deg) scale(0.1);
    visibility: hidden;
    opacity: 0;
  }
  1% {
    visibility: visible;
  }

  100% {
    transform: rotate(360deg) scale(1);;
    opacity: 1;
  }
}

@keyframes shrink {
  0% {
    transform: rotate(0deg) scale(1);
    visibility: visible;
    opacity: 1;
  }

  99% {
    visibility: hidden;
  }

  100% {
    transform: rotate(-360deg) scale(0.1);
    opacity: 0;
  }
}

内容的提问来源于stack exchange，提问作者Kostya