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

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


.fadeIn {
    animation-name: fadeInAnime;
    animation-duration: .5s;
    animation-fill-mode:forwards;
    opacity: 0;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    overflow: hidden;
    /* perspective: 1000;  */
    }

    .fadeIn.animdelay {
        animation-delay: 1.1s;
    }
    
@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: 1s;
}
  
  @keyframes fadeUpAnime{
  from {
    opacity: 0;
     transform: translateY(100px);
  }
  
  to {
      opacity: 1;
      transform: translateY(0);
  }
  }