Así que solo soy un principiante y solo estoy tratando de descifrar las animaciones y cómo funcionan.
Mi plan es mover la pelota infinitamente en un número infinito de grados (digamos 90) en una línea. Aquí hay un par de problemas que me preguntaba:
.line, .line-deg90 { background-color: hsl(0, 0%, 0%); height: 3px; width: 400px; position: absolute; top: 50%; left: 50%; margin: 0 0 0 -200px; transform-origin: 50%; } .line-deg90 { transform: rotate(90deg); } .ball { background-color: hsl(0, 0%, 0%); height: 30px; width: 30px; border-radius: 50%; position: absolute; top: -15px; left: 0; animation: move 2s infinite alternate ease-in-out; } @keyframes move { 0% { left: 0px; top: -15px; } 100% { left: 370px; top: -15px; } <div class="line"> <div class="ball"></div> <div class="line-deg90"></div>Aquí hay una idea usando variables CSS para tener un código genérico. Simplemente ajuste el ángulo y el desplazamiento para controlar el movimiento.
.ball { --angle: 0deg; --offset: 150px; background-color: hsl(0, 0%, 0%); height: 30px; width: 30px; border-radius: 50%; position: absolute; inset: 0; margin: auto; animation: move 2s infinite alternate ease-in-out; } @keyframes move { 0% { transform: rotate(var(--angle)) translate(var(--offset)) } 100% { transform: rotate(var(--angle)) translate(calc(-1*var(--offset))) } } html { min-height:100%; background: linear-gradient(red 0 0) center/100% 2px, linear-gradient(red 0 0) center/2px 100%; background-repeat:no-repeat; } <div class="ball"></div> <div class="ball" style="--angle:90deg;--offset:100px"></div>