@charset "utf-8";

/* 下から */

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

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

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


/* 左から */

.fadeLeft{
    animation-name:fadeLeftAnime;
    animation-duration:0.5s;
    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:0.5s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes fadeRightAnime{
      from {
        opacity: 0;
      transform: translateX(100px);
      }
    
      to {
        opacity: 1;
      transform: translateX(0);
      }
    }

    /* 拡大 */
.zoomIn{
  animation-name:zoomInAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
}

@keyframes zoomInAnime{
  from {
  transform: scale(0.6);
  opacity: 0;
  }

  to {
    transform: scale(1);
  opacity: 1;
  }
}

    /* アニメーションスタートの遅延時間を決めるCSS*/

.delay-time02{
  animation-delay: 0.2s;
  }
  
  .delay-time04{
  animation-delay: 0.4s;
  }
  
  /*==================================================
動き自体の指定：今回は「ふわっ」
===================================*/

/* .fadeUp {
  animation-name:fadeUpAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
  opacity: 0;
  }
  @keyframes fadeUpAnime{
    from {
      opacity: 0;
    transform: translateY(100px);
    }
  
    to {
      opacity: 1;
    transform: translateY(0);
    }
  } */