Create Visual Direction by Fading an Element from Left to Right category:423 why only 50% @keyframes used

HTML-CSS
1

why only 50% keyframes used not 0% and 100% but in the next topic **

Animate Elements Continually Using an Infinite Animation Count we have used 0% 50% and 100% keyframes

**

2

It is just a shorter syntax.

Valid keyframe lists

If a keyframe rule doesn’t specify the start or end states of the animation (that is, 0%/from and 100%/to), browsers will use the element’s existing styles for the start/end states. This can be used to animate an element from its initial state and back.

It would also be possible in the next challenge to use the same syntax. It may have been done the way it is to make it more clear that the top property is going from 0px to 249px and back to 0px.

Summary 
<style>

  #ball {
    width: 100px;
    height: 100px;
    margin: 50px auto;
    position: relative;
    top: 0px; /* Set top property start/end position */
    border-radius: 50%;
    background: linear-gradient(
      35deg,
      #ccffff,
      #ffcccc
    );
    animation-name: bounce;
    animation-duration: 1s;
    animation-iteration-count: 3;
  }

  @keyframes bounce{
   /* Only use 50% */
    50% {
      top: 249px;
      width: 130px;
      height: 70px;
    }
  }
</style>
<div id="ball"></div>
3

thanx for your kind suggestion