How to fix a ball animation with CSS

Issue

I'm trying to make a ball that moves from bottom right -> top center -> bottom (/) left. However, my animation moves from top right-> bottom center -> top left (/).

#stage {
 height:300px;
 border:1px solid #000;
}
#ball {
  position:relative;
  width:50px;
  height:50px;
  border-radius:50%;
  background-color:red;
  animation:ball-move 2s infinite reverse linear 2s,
  color-change 2s infinite alternate 2s;
}
@keyframes ball-move {
  /* your keyframe styles go here */
  0% {
    top:50px;   
    left:50px;
  }
  50% {
    top:calc(100% - 50px); 
    left:calc(50% - 25px); 
  } 
  100% {
    top:0;
    left:calc(100% - 50px);
  }
}

<div id="stage">
  <div id="ball"></div>
</div>

Solution

You need to adjust the keyframes. The "top" ones just needed to be changed.

#stage {
  height: 300px;
  border: 1px solid #000;
}
#ball {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: red;
  animation: ball-move 2s infinite reverse linear 2s,
    color-change 2s infinite alternate 2s;
}
@keyframes ball-move {
  /* your keyframe styles go here */
  0% {
    top: calc(100% - 50px);   
    left: 50px;
  }
  50% {
    top: 0px; 
    left: calc(50% - 25px); 
  } 
  100% {
    top: calc(100% - 50px);
    left: calc(100% - 50px);
  }
}

<div id="stage">
  <div id="ball"></div>
</div>

Answered By - chase