I am attempting to create a simulation where a ball moves in the following pattern: bottom right -> top center -> bottom (/) left. However, my animation seems to be moving 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>