/***上にかぶせる背景***/
.mask{
  position:fixed; /*固定表示*/
  top:0;
  left:0;
  width: 100vw; /*画面幅*/
  height: 100vh; /*画面の高さ*/
  background-color:#4B9E5F; /*背景色*/
  z-index:999; /*最前面に*/
  animation: fadeOut 0.8s forwards; /*フェードアウト*/
  animation-delay: 1.5s; /*ロゴ画像のアニメーション後に*/
}

/*フェードアウトアニメーション*/
@keyframes fadeOut{
  0%{
    opacity: 1;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

/***ロゴ画像***/
.mask img{
  position: absolute;
  width: 100px;
  height: 100px;
  top: 5%;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  animation: bound 0.5s forwards; /*任意のアニメーション*/
  animation-delay: 0.6s; /*好みで遅延*/
}

/*鼓動する*アニメーション*/
@keyframes bound{
  30%{
    transform: scale(1.1);
  }
  100% {
    transform: scale(0.9);
  }
}