Make Motion More Natural Using a Bezier Curve - need more explanation

Tell us what’s happening:
what does the top offset in 50% duration? Does this make the upper and down motion identical?
I don’t understand how this function can allow manifesting the juggling motion. I feel like I need more explanation of functionality about cubic-bezier function from experts.

Your code so far

  .balls {
    border-radius: 50%;
    position: fixed;  
    width: 50px;
    height: 50px;
    top: 60%;
    animation-name: jump;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  #red {
    background: red;
    left: 25%;
    animation-timing-function: linear;
  #blue {
    background: blue;
    left: 50%;
    animation-timing-function: ease-out;
  #green {
    background: green;
    left: 75%;
    animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);

  @keyframes jump {
    50% {
      top: 10%;
<div class="balls" id="red"></div>
<div class="balls" id="blue"></div>
<div class="balls" id="green"></div>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.1.2 Safari/605.1.15.

Link to the challenge: