<h1>スクロールテスト</h1>
<p>スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
</p>
<ul class="scroll">
  <li class="fade_in"><figure>
    <figcaption>フェードイン</figcaption>
    <img src="https://www.instagram.com/p/Bg3qtU9ls-A/media/?size=l">
    </figure></li> 

  <li class="up"><figure>
    <figcaption>上に移動</figcaption>
    <img src="https://www.instagram.com/p/Bg3qtU9ls-A/media/?size=l">
    </figure></li> 

  <li class="side"><figure>
    <figcaption>横に移動</figcaption>
    <img src="https://www.instagram.com/p/Bg3qtU9ls-A/media/?size=l">
    </figure></li> 
<p>スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  スクロールしてください<br>
  </p>

</ul>

h1, p {
  text-align: center;
}

.scroll {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 0;
}

.scroll li {
  list-style: none;
  transition: 0.5s;
  margin: 0 0 50px;
}

.scroll img {
  width: 100%;
  margin: 10px 0 0 ;
}

.scroll figcaption {
  text-align: center;
}

.scroll .fade_in {
  opacity: 0;  
}

.scroll .fade_in_anime {
  opacity: 1;  
}

.scroll .up {
  transform: translate(0,50px); 
  opacity: 0;  
}

.scroll .up_anime {
  transform: translate(0,0); 
  opacity: 1;  
}

.scroll .side {
  transform: translate(50px,0); 
  opacity: 0;  
}

.scroll .side_anime {
  transform: translate(0,0); 
  opacity: 1;  
}