/* fadeUp */

.fadeUp{
    animation-name:fadeUpAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes fadeUpAnime{
      0% {
        opacity: 0;
      transform: translateY(50px);
      }
    
      100% {
        opacity: 1;
      transform: translateY(0);
      }
    }
    
    
    /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
     
    .fadeUpTrigger{
        opacity: 0;
    }


.fade {
  animation-name: fade;
  animation-duration: 1s;
}
    @keyframes fade{
      0%{
        opacity: 0;
      }
      100%{
        opacity: 1;
      }
}