css 次动画重复之间的延迟

Question

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

@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

您可以让动画运行从 0-30% 并在动画重复

之前将其余部分保留为 "delay"

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

Answer 2

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

@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 3

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

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

mixin 如下所示。我没有包含这些函数，但您可以在 codepen link.

上找到它们

@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>

css 次动画重复之间的延迟

A delay between css animation repetitions

css

infinite

css-animations