/* スクロールをしたら出現する要素にはじめに透過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;
  }
  
  @keyframes fadeUpAnime{
  from {
      opacity: 0;
  transform: translateY(100px);
  }
  
  to {
      opacity: 1;
  transform: translateY(0);
  }
  }

  .animdelay.fadeUp {
    animation-delay: 0.2s;
  }
    
    @keyframes fadeInAnime{
      from {
        opacity: 0;
      }
    
      to {
        opacity: 1;
      }
    }  

/* 上から */

.fadeDown{
  animation-name:fadeDownAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  
  @keyframes fadeDownAnime{
    from {
      opacity: 0;
    transform: translateY(-100px);
    }
  
    to {
      opacity: 1;
    transform: translateY(0);
    }
  }    

  /* 左から */

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

  @keyframes fadeLeftAnime{
  from {
      opacity: 0;
  transform: translateX(-100px);
  }

  to {
      opacity: 1;
  transform: translateX(0);
  }
  }

  /* 右から */

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

  @keyframes fadeRightAnime{
  from {
      opacity: 0;
  transform: translateX(100px);
  }

  to {
      opacity: 1;
  transform: translateX(0);
  }
  }