/* 左から */

.fadeLeft{
    display: block;
    animation-name:fadeLeftAnime;
    animation-duration:3s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes fadeLeftAnime{
      from {
        opacity: 0;
        transform: translateX(-100px);
      }
    
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }
    
    /* 右から */
    
    .fadeRight{
        display: block;
    animation-name:fadeRightAnime;
    animation-duration:2s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes fadeRightAnime{
      from {
        opacity: 0;
        transform: translateX(100px);
      }
    
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }