Javascript 如何使用CSS动画创建无限符号轨迹？

我想使用div创建无限符号动画。 要实现这一点，需要在div上执行哪些动画

---

提前谢谢

例如，在这张图片中：

所有的紫色都是你的“球”应该穿过的点。 可以将每个点视为关键帧。在100%的时间内有16个点（中间有两个相同）。这意味着每个关键帧占总时间的6.25%。

使用CSS轻松创建球：

.ball
{
    width: 10px;
    height: 10px;
    background-color: black;
    border-radius: 40px;
    position: absolute;
}

基本上你定义了每个点的左边和顶部位置

现在我举了一个很小的例子，因为我没有太多时间；P 但我希望你明白我在做什么：

更多关于动画的信息

更新 没有一个有效的例子，我不能让这个答案成立。因此，特此：

---

正如你所看到的，过渡并不是那么顺利。添加的路径点越多，动画曲线就越平滑。

因此我有三个选项供您选择。一种是基本上将原点转换到右侧，这取决于点的大小并将其旋转360度，当旋转完成时，将原点转换到原始图像的左侧并逆时针旋转0度。 这是一支钢笔。它仍然有点紧张，但我正在努力

现在第二个选项有点复杂，但会给你一个更好的动画。四个步骤

将点沿对角线向上向右平移或移动

沿对角线（右下）变换原点，并将其顺时针旋转若干度

再次将原点变换为50%50%并向左上平移

重复步骤2，逆时针旋转

---

第三个更为复杂，仅css无法实现。您需要使用javascript。你所能做的是，你可以想出一个无穷大符号的方程式，也叫做，计算相对于你当前位置的位置，并制作动画。

尝试了另一种方法。仍然只是CSS3动画

两个球沿着轨道运行两次。一个顺时针，另一个逆时针。两个轨道（div）彼此无缝相邻。在第一个完成运行之前，另一个将隐藏。当他们在中间相遇时，第一个躲起来，第二个开始跑。

<div id="left"></div>
<div id="right"></div>

---

可以找到更多关于以行星为例的圆形路径动画的信息。还有

rotate（360度）

和

translateX（100px）

解释得很好。

我刚刚偶然发现了这一点，并创建了一个小网站，将任何SVG路径转换为一系列点

例如，如果您想为SVG设置动画，只需读取内容并将其粘贴到我开发的一个小文件中：

<svg width="102px" height="52px" viewBox="0 0 102 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>Line</title>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square">
        <path d="M26,1 C38.5,1 51,26 51,26 C51,26 63.5,51 76,51 C88.5,51 101,38.5 101,26 C101,13.5 88.5,1 76,1 C63.5,1 51,26 51,26 C51,26 38.5,51 26,51 C13.5,51 1,38.5 1,26 C1,13.5 13.5,1 26,1 Z" id="Line" stroke="#FF3737"></path>
    </g>
</svg>

线

代码进入第一个文本字段，点数倒数进入第二个文本字段（1=多个点，10=不是那么多点等等）

---

它输出一个关键帧动画系列，你可以用它来制作你的点的动画：

我想你的意思是“sin”而不是“sign”，我会想到并创建一条绝对div必须经过的路径。我的意思是我想用css动画创建div的这个移动。@nkmol:如果你知道如何在css动画中解释或创建这个移动。你知道吗它必须是一个

？HTML5

动画可能是解决此问题的更好方法。感谢您的回复，但您的动画似乎不像无限符号。事实上，我制作了20秒的动画，只创建了前2个点：P您可以在2秒钟内看到未完成的动画。如果你让动画在开始的地方结束，它将在一个循环中无限循环。实际上我只想用一个点来创建它。我想你想要一个预编码的动画吗？那么，当只有1分时，球怎么知道去哪里呢？很抱歉，我不能再帮你们了：当pit开始循环时，它会停一秒钟，但它非常准确。谢谢你的努力。如果可能的话，请尽量做到完美。这是我最好的尝试。

<svg width="102px" height="52px" viewBox="0 0 102 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>Line</title>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square">
        <path d="M26,1 C38.5,1 51,26 51,26 C51,26 63.5,51 76,51 C88.5,51 101,38.5 101,26 C101,13.5 88.5,1 76,1 C63.5,1 51,26 51,26 C51,26 38.5,51 26,51 C13.5,51 1,38.5 1,26 C1,13.5 13.5,1 26,1 Z" id="Line" stroke="#FF3737"></path>
    </g>
</svg>