/* その場で */
.fadeIn{
    animation-name:fadeInAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes fadeInAnime{
      from {
        opacity: 0;
        transform: translateY(30px);
      }
    
      to {
        opacity: 1;
        transform: translateY(0px);
      }
    }

/* その場で */
.fadeIn_02{
    animation-name:fadeInAnime_02;
    animation-duration:3.5s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes fadeInAnime_02{
      0% {
        opacity: 0;
      }
      40% {
        opacity: 0;
      }
    
      100% {
        opacity: 1;
      }
    }

/* 上から */

.fadeDown{
    animation-name:fadeDownAnime;
    animation-duration:1.0s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes fadeDownAnime{
      0% {
        opacity: 0;
        transform: translateY(-50px);
      }

      20% {
        opacity: 0;
      }
    
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }