css动画重复之间的延迟

我试图创建一个动画，其中每个字母分别移动，这很好，但当我添加无限时，循环之间没有延迟，因此字母不断地一个接一个地移动。我试图在基础动画上添加动画延迟，但它只是减慢了动画速度

@关键帧移动{
0% {
变换：translateY（0）
}
100% {
变换：translateY（4vh）
}
}
.anim p{
动画：向前移动0.7秒缓进缓出；
动画计时功能：线性；
}
.anim:n子（1）p{动画延迟：0.5s}
.anim:n子（2）p{动画延迟：1s}
.anim:n子（3）p{动画延迟：1.5s}
.anim:n子（4）p{animation delay:2s}

Lorem ipsum dolor sit amet，是一位杰出的献身者。塞德·斯克利斯、泰勒斯·伊德·卡苏斯、厄洛斯·莫里斯·比本杜姆·里苏斯、非共通钻石和马萨。


整型孕妇排卵nisl，在ultrices felis convallis vitae。这是一个很好的例子。佩伦茨克和乌尔纳阿库。整型，如箭头所示。


我是一只猫，我是一只猫。同侧矢状位为伏隔，右侧为无尾。孕妇调味汁。梅塞纳斯说的是同侧。乌尔里西斯之命，土拨鼠，丘脑。Donec augue tellus，pulvinar vel sapien quis，rhoncus封建精英。


非同侧臀间臀。Donec Pat arcu id sem tristique faucibus。普尔文纳·莫里斯（Praesent pulvinar mauris）坐着一位名叫amet mi fringilla的女士，她是一位名叫dapibus erat sollicitudin的女士。

您可以让动画以0-30%的速度运行，并在动画重复之前将其余部分作为“延迟”处理

---

选中此项：

您可以按如下方式执行，即根据关键帧状态创建非活动阶段：

@关键帧移动{
0% {
变换：translateY（0）
}
20% {
变换：translateY（4vh）
}
40% {
变换：translateY（0）
}
100% {
变换：translateY（0）
}
}
.阿尼姆，p{
显示：内联块；
}
.anim p{
动画：移动3秒，轻松进出无限；
}
.anim:n个孩子（1）p{
动画延迟：0.5s
}
.anim:n个孩子（2）p{
动画延迟：1s
}
.anim:n个孩子（3）p{
动画延迟：1.5s
}
.anim:n个孩子（4）p{
动画延迟：2秒
}

A

B

C

D

我认为您确实需要为每个要设置动画的项目设置定制关键帧动画-

动画延迟

在这方面对您没有帮助

我在codepen上玩了一个游戏，为您生成各个关键帧动画

混合器如下所示。我没有包括这些函数，但是你可以在代码笔链接上找到它们

@mixin move($animation-timing, $item-number, $total-items, $delay-between-items) {
    $animation-name: "move" + $item-number;
    $duration: total-time($animation-timing, $total-items, $delay-between-items);
    $start: start-animation($item-number, $delay-between-items, $duration) + 0%;
    $end: end-animation($item-number, $delay-between-items, $duration, $animation-timing) + 0%;

    @keyframes #{$animation-name} {
        #{$start} {
            transform: translateY(0)
        }
        #{$end} {
            transform: translateY(4vh)
        }
        100% {
            transform: translateY(4vh)
        }
    }

    animation: (move + $item-number) ($animation-timing + 0s) ease-in-out forwards infinite;
}

您可以如下所示调用mixin

.anim:nth-child(1) p { @include move(0.7, 1, 4, 0.5); }
.anim:nth-child(2) p { @include move(0.7, 2, 4, 0.5); }
.anim:nth-child(3) p { @include move(0.7, 3, 4, 0.5); }
.anim:nth-child(4) p { @include move(0.7, 4, 4, 0.5); }

如果您不能使用SASS/SCSS生成定制CSS，则根据上述代码编译的CSS如下所示：

.anim{display:inline block；}
.anim:n个孩子（1）p{
动画：移动10.7秒，快进快退，无限向前；
}
@关键帧移动1{
18.5185185185% {
变换：translateY（0）；
}
44.4444444444% {
转换：translateY（4vh）；
}
100% {
转换：translateY（4vh）；
}
}
.anim:n个孩子（2）p{
动画：移动20.7秒，快进快退，无限向前；
}
@关键帧移动2{
37.037037037% {
变换：translateY（0）；
}
62.962962963% {
转换：translateY（4vh）；
}
100% {
转换：translateY（4vh）；
}
}
.anim:n个孩子（3）p{
动画：移动30.7秒，快进快退，无限向前；
}
@关键帧移动3{
55.5555555556% {
变换：translateY（0）；
}
81.4814814815% {
转换：translateY（4vh）；
}
100% {
转换：translateY（4vh）；
}
}
.anim:n个孩子（4）p{
动画：移动4 0.7秒，快进快退无限；
}
@关键帧移动4{
74.0740740741% {
变换：translateY（0）；
}
100% {
转换：translateY（4vh）；
}
100% {
转换：translateY（4vh）；
}
}

A

B

C

D

在上运行代码并共享链接。这样我们就能知道哪里出了错