在CSS动画中使用线连接点

我用CSS制作了这个动画，它们是简单的上下移动的点：

$dot-list: 1 2 3 4 5;

.dot-animation {
    display: block;
    span {
        display: inline-block;
        margin-top: 10px;
        height: 20px;
        width: 20px;
        border-radius: 50%;
        &:not(:first-child) { margin-left: 30px; }
    }
    @each $current-dot in $dot-list {
        $i: index($dot-list, $current-dot);
        $t: $i * -0.787;
        span:nth-child(#{$i}) {
            background: white;
            border: 5px solid #48c0c0;
            animation: move 1s ease-in-out (#{$t}s) infinite alternate;
        }
    }
}

@keyframes move {
    from { transform: translateY(0px); }
    to { transform: translateY(60px); }
}

我想用线连接这些点，所以每次点移动时，线都应该旋转以保持结合

下面是我想做的一个例子：

你能帮我弄清楚怎么做吗

---

提前谢谢

＞P>我会考虑使用歪斜变换来简化动画。

以下是一个简化的示例：

.dot动画{
显示：块；
填充：50px；
}
.dot动画跨度{
位置：相对位置；
显示：内联块；
边缘顶部：10px；
宽度：50px；
利润率：10px 1px；
高度：5px；
背景：#48c0c0；
}
.dot动画跨度：第一个孩子{
背景：#fff；
}
.dot动画跨度：之前{
内容：“；
位置：绝对位置；
z指数：2；
右：-12px；
顶部：-12px；
高度：20px；
宽度：20px；
背景：白色；
边框：5px实心#48c0c0；
边界半径：50%；
}
.dot动画跨度：第n个子项（偶数）{
动画：move-l1s线性无限交替；
变换原点：左；
}
.dot动画跨度：第n个孩子（偶数）：之前{
动画：move-r1s线性无限交替；
}
.dot动画跨度：第n个子项（奇数）{
动画：move-r1s线性无限交替；
变换原点：右；
}
.dot动画跨度：第n个子项（奇数）：之前{
动画：move-l1s线性无限交替；
变换原点：右；
}
@关键帧移动-l{
从{
变换：歪斜（0px）；
}
到{
变换：歪斜（-25度）；
}
}
@关键帧移动-r{
从{
变换：歪斜（0px）；
}
到{
变换：歪斜（25度）；
}
}

---

谢谢你的回答，这正是我需要的！