CSS动画重复之间的延迟 [英] A delay between css animation repetitions
本文介绍了CSS动画重复之间的延迟的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试创建一个动画，每个字母分别移动，效果很好，但是当我添加无限时，循环之间没有延迟，因此字母不断地一个接一个地移动.我试图在基本动画上添加动画延迟，但这只会减慢动画速度.
@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>
在重新启动到初始位置后，我希望无限循环之间存在延迟，目前它是直接启动的.
解决方案
我认为您确实需要为要设置动画的每个项目设置定制的关键帧动画-animation-delay在这里不会为您提供帮助.
我在Codepen上玩耍，并创建了具有附带功能的mixin 为您生成单独的关键帧动画.
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>
I am trying to create an animation where each letter is moved separately, which works fine but when I add infinite it does not have a delay between the loops so the letters are constantly moving one after another. I tried to add animation delay on the base animation but it just slows down the animation speed.
@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>
I want to be infinite with delays between loops after restarts to initial position, currently it directly starts.
解决方案
I think you really need bespoke keyframe animations setting up for each individual item you want to animate - animation-delay isn't going to help you here.
I had a play around on codepen and created a mixin with accompanying functions to generate the individual keyframe animations for you.
The mixin is shown below. I haven't included the functions but you will find them on the 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;
}
You would call the mixin as below.
.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); }
If you can't use SASS / SCSS to generate your bespoke CSS, the compiled CSS from the above code is shown below:
.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动画重复之间的延迟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
