CSS3 animation - arc between 2 elements

Question

I want to create an animation between 2 elements with dynamic width between them (depend on the screen size).

Somebody can give me an hint how to implement? See attached image.

Answer 1

If you manage to get a div to extend the distance that you want to cover, this solution can work:

set 2 animations, one for horizontal axis, and another for the vertical axis

.container {
  width: 400px;
  height: 100px;
  border: solid 1px blue;
  position: relative;
}

.container:nth-child(2) {
  width: 800px;
}

.inner {
  width: 25px;
  height: 25px;
  background-color: green;
  border-radius: 100%;
  animation-name: arctop, arcleft;
  animation-duration: 2s, 2s;
  animation-timing-function: linear, linear;
  animation-iteration-count: infinite, infinite;
  position: absolute;
}

@keyframes arctop {
  0% {top: 75px; animation-timing-function: ease-out;}
  50% {top: 0px; animation-timing-function: ease-in;}
  100% {top: 75px;}
}

@keyframes arcleft {
  0% {left: 0px;}
  100% {left: calc(100% - 25px)}
}

<div class="container">
    <div class="inner"></div>
</div>
<div class="container">
    <div class="inner"></div>
</div>