css动画重复之间的延迟

Question

我正在尝试创建一个动画，其中每个字母都单独移动，效果很好，但是当我添加无限时，它在循环之间没有延迟，因此字母不断地一个接一个地移动。我尝试在基础动画上添加动画延迟，但它只会减慢动画速度。

@keyframes move {
    0% {
        transform: translateY(0)
    }
    100% {
        transform: translateY(4vh)
    }
}
    
.anim p {
    animation: move 0.7s ease-in-out forwards;
    animation-timing-function: linear;
}

.anim:nth-child(1) p { animation-delay: 0.5s }
.anim:nth-child(2) p { animation-delay: 1s }
.anim:nth-child(3) p { animation-delay: 1.5s }
.anim:nth-child(4) p { animation-delay: 2s }

<div class="anim">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque, tellus id cursus interdum, eros mauris bibendum risus, non commodo diam urna et massa.
  </p>
  <p>
    Integer gravida vulputate nisl, at ultrices felis convallis vitae. Cras tincidunt lacus eget lectus commodo iaculis. Pellentesque et urna arcu. Integer eu enim a velit sagittis iaculis eu ut nulla.
  </p>
  <p>
    Etiam ac felis id odio dapibus tincidunt id eu mi. Etiam accumsan sagittis ipsum, sed ornare nulla malesuada in. Phasellus gravida risus vel tellus eleifend condimentum. Maecenas sed tellus ipsum. Sed vitae mi ultricies, placerat turpis cursus, accumsan purus. Donec augue tellus, pulvinar vel sapien quis, rhoncus feugiat elit.
  </p>
  <p>
    Nulla non ipsum eleifend turpis interdum euismod. Donec volutpat arcu id sem tristique faucibus. Praesent pulvinar mauris sit amet mi fringilla, a dapibus erat sollicitudin.
  </p>
</div>

我想在重新启动到初始位置后循环之间的延迟是无限的，目前它直接启动。

Answer 1

您可以这样做，即根据关键帧状态创建非活动阶段：

@keyframes move {
  0% {
    transform: translateY(0)
  }
  20% {
    transform: translateY(4vh)
  }
  40% {
    transform: translateY(0)
  }
  100% {
    transform: translateY(0)
  }
}
.anim, p {
  display: inline-block;
}
.anim p {
  animation: move 3s ease-in-out infinite;
}

.anim:nth-child(1) p {
  animation-delay: 0.5s
}

.anim:nth-child(2) p {
  animation-delay: 1s
}

.anim:nth-child(3) p {
  animation-delay: 1.5s
}

.anim:nth-child(4) p {
  animation-delay: 2s
}

<div>
  <div class="anim">
    <p>A</p>
  </div>
  <div class="anim">
    <p>B</p>
  </div>
  <div class="anim">
    <p>C</p>
  </div>
  <div class="anim">
    <p>D</p>
  </div>
</div>

Answer 2

我认为您确实需要为要制作动画的每个项目设置定制的关键帧动画 - animation-delay 在这里帮不了您。

我在 codepen 和 created a mixin with accompanying functions 上玩了一下，为您生成单独的关键帧动画。

mixin 如下所示。我没有包含这些功能，但您可以在 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:nth-child(1) p {
    animation: move1 0.7s ease-in-out forwards infinite;
}

@keyframes move1 {
    18.5185185185% {
        transform: translateY(0);
    }
    44.4444444444% {
        transform: translateY(4vh);
    }
    100% {
        transform: translateY(4vh);
    }
}

.anim:nth-child(2) p {
    animation: move2 0.7s ease-in-out forwards infinite;
}

@keyframes move2 {
    37.037037037% {
        transform: translateY(0);
    }
    62.962962963% {
        transform: translateY(4vh);
    }
    100% {
        transform: translateY(4vh);
    }
}

.anim:nth-child(3) p {
    animation: move3 0.7s ease-in-out forwards infinite;
}

@keyframes move3 {
    55.5555555556% {
        transform: translateY(0);
    }
    81.4814814815% {
        transform: translateY(4vh);
    }
    100% {
        transform: translateY(4vh);
    }
}

.anim:nth-child(4) p {
    animation: move4 0.7s ease-in-out forwards infinite;
}

@keyframes move4 {
    74.0740740741% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(4vh);
    }
    100% {
        transform: translateY(4vh);
    }
}

<div class="anim">
    <p>A</p>
</div>
<div class="anim">
    <p>B</p>
</div>
<div class="anim">
    <p>C</p>
</div>
<div class="anim">
    <p>D</p>
</div>

Answer 3

您可以让动画从 0-30% 运行，而在动画重复之前将其余部分作为“延迟”

检查这个：https://css-tricks.com/css-keyframe-animation-delay-iterations/