Estoy haciendo que una pelota rebote de div a div (con .bounce-on). Para hacer eso, estoy usando divs absolutos (con .orbit) posicionados con JS para hacer que la pelota rebote desde el medio hacia el medio de cada div.

Aquí está el codepen: https://codepen.io/wearysigninup/pen/rNpNmoZ

 .css-container{ position:relative; text-align:center; } .orbit{ top: -20px; position: absolute; width: 50px; height:50px; border: black 1px solid; border-radius:50%; transform: rotate(0deg); }

 <div class="css-container"> <div class="orbit"> <div id="ball"></div> </div> ... <div class="orbit"></div> </div> <div class="line"> <span class="bounce-on">bounce</span>·<span class="bounce-on">bounce</span> <span class="bounce-on">bounce</span> <span class="bounce-on">bounce</span>· <span class="bounce-on">bounce</span> </div>

Me gustaría que div.orbit ajuste su ancho en función de los cambios en .bounce-on sin usar javascript para volver a calcular cosas si es posible. El tiempo de la animación está ligado a la música, y me gustaría que no se desincronice.

¿Alguien podría ayudar con eso? ¿Hay un marcado html o algunos cálculos css que lo hagan posible?

En este momento, estoy escuchando el evento de cambio de tamaño para ajustar el tamaño, pero el rebote no está sincronizado.

Que yo sepa, lo que pido no es posible. Pero estuve bastante cerca con el texto svg. El único problema con el uso de svg es que los finalistas de eventos se activan de manera inconsistente y no son compatibles con los navegadores. Además, no es muy accesible.

Espero que de alguna manera sea posible imitar el comportamiento de svg al cambiar el tamaño de la ventana con css, de ahí mi pregunta.