CSS3 动画 - 两个元素之间的弧线答案

【问题标题】：CSS3 animation - arc between 2 elementsCSS3 动画 - 两个元素之间的弧线
【发布时间】：2016-06-14 22:48:58
【问题描述】：

我想在两个元素之间创建一个动画，它们之间具有动态宽度（取决于屏幕大小）。

有人可以给我一个提示如何实现吗？见附图。

【问题讨论】：

试试 google..你会得到一切。
相信我，我试过了 - 没有得到这个特定问题的答案。如果你有一个好的链接，欢迎与我分享。
您可以添加您通过 jsfiddle 或 plunker 尝试过的代码吗？
希望此链接对您有所帮助：stackoverflow.com/questions/8761993/…
This 是一个很好的开始，但是想不出如何动态设置起点和终点以及如何控制圆弧的角度。

标签： css css-transitions css-animations css-transforms

【解决方案1】：

如果你设法得到一个 div 来扩展你想要覆盖的距离，这个解决方案可以工作：

设置2个动画，一个用于横轴，另一个用于垂直轴

.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>

【讨论】：

谢谢，我从来不知道我可以在一个元素上使用多个动画。非常感谢您的回答！ @vals
很高兴它有帮助！但是浏览器对多个动画的支持不是很好，所以你可能想要创建一个中间元素，并为每个元素分配一个动画。