/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger {
    opacity: 0;
    
}

.fadeIn {
    animation-name: fadeInAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
    animation-delay: 0.2s;
}

.animdelay.fadeIn {
  animation-delay: 0.8s;
}
    
@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeUp{
  animation-name:fadeUpAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;
  }

.fadeUp.animdelay {
  animation-delay: 1.2s;
}

  
  @keyframes fadeUpAnime{
  from {
      opacity: 0;
  transform: translateY(100px);
  }
  
  to {
      opacity: 1;
  transform: translateY(0);
  }
  }

  .fadeLeft{
    animation-name:fadeLeftAnime;
    animation-duration:0.8s;
    animation-fill-mode:forwards;
    opacity:0;
    }

    .fadeLeft.animdelay {
      animation-delay: 1s;
  }
    
    @keyframes fadeLeftAnime{
      from {
        opacity: 0;
      transform: translateX(-100px);
      }
    
      to {
        opacity: 1;
      transform: translateX(0);
      }
    }