How are the balls bouncing (looping)

HTML-CSS
1

Tell us what’s happening:

<style>
  .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.69, 0.1, 1, 0.1);
  }

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

I know that animation-iteration-count: Infinite will have the animation repeat and that the animation-timing-function modifies how the animation transitions through keyframes, but I don’t understand how setting a keyframe rule at 50% combined with everything else will result in a loop where the balls bounce.

I can pass the tests, but I would like to understand that part of the code.

Your code so far


<style>
.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.69, 0.1, 1, 0.1);
}

@keyframes jump {
  50% {
    top: 10%;
  }
}
</style>
<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_15_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.132 Safari/537.36.

Challenge: Make Motion More Natural Using a Bezier Curve

Link to the challenge:

2

Hello @eyc, welcome to the forum.

If in a keyframe definition the start and end position are left out, the browser will consider the initial value defined.

In this case for example the original value is top: 60%, so the browser will make sure that at the beginning and end of the animation that will be the value.

What we declared in the animation ourself is the top value during the middle of the animation:

    50% {
      top: 10%;
    }

This is equivalent to writing

  from { top:  60%; } /* taken from the initial value*/
  50%  { top: 10% } 
  to   { top: 60% }  /* taken from the initial value*/

Hope this helps :+1:

1 Like
3

thank you so much marmiz :slight_smile: