title: How to do this CSS animation? (timing-function)
body: <p>I want an animation like this:  </p>
  
  <p><a href="https://i.stack.imgur.com/CuG88.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CuG88.gif" alt="like this"></a>  </p>
  
  <p>(The lower blue line is an image of movement. lol)  </p>
  
  <p>I tried to make with cubic-bezier but it didn't work..  </p>
  
  <hr>
  
  <p>I don't know much about css animation, but cubic-bezier can add points other than the first and last?<br>
  In my opinion, I feel like I should increase points..  </p>
  
  <p><strong>Q</strong>. What kind of curve should I use for css animation like this?  </p>