How to fix a ball animation with CSS-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

#container{
            box-sizing: border-box;
            width:  400px;
            height: 190px;
            margin:  0 auto;
            border: 1px solid gray;
            background: #fefefe;
        }

        .ball{
            width: 50px;
            height: 50px;
            background: tomato;
            border:  1px solid crimson;
            border-radius: 50%;
            position: relative;
            animation:  bounce 2s infinite cubic-bezier(.5,.5,.5,.5) alternate;
        }

        @keyframes bounce{
        0%{
            top: calc(100% - 50px);
            left: calc(100% - 50px);
        }

        50%{
            left:  calc(50% - 50px);
            top: 0;
        }

        100%{
            top:  calc(100% - 50px);
            left: 0;
        }
    }

<body>
    <div id="container">
        <div ></div>
    </div>
</body>

I hope this code will help you to solve your issue.