如何使用CSS动画创建无限的Sign Trajectory？

Question

我想用div创建无限符号动画.需要在div上做什么动画来实现这一目标.

在此输入图像描述

提前致谢!

Answer 1

那么例如在这张图片中:

在此输入图像描述

所有的紫色都是你的'球'应该经过的点.您可以将每个点视为关键帧.在100%的时间内有16个点(中心相同).这意味着每个关键帧占总时间的6.25%.

使用CSS轻松创建球:

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

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

现在我做了一个非常小的例子,因为我没有太多时间;但我希望你能理解我想要做的事情:jsFiddle

有关动画的更多信息这里.

更新

没有一个有效的例子,我不能让这个答案成立.特此:

正如您所看到的那样,过渡并不是那么顺利.您添加的路径点数,动画曲线的平滑程度.