A delay between css animation repetitions

Refresh

March 2019

Views

63 time

1

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.

3 answers

1

You can do it as follows, i.e. creating the non-active phase by according keyframe states:

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

Я думаю , что вам действительно нужно ключевой кадр анимации на заказ настройки для каждого отдельного элемента , который вы хотите , чтобы оживить - animation-delayне собирается , чтобы помочь вам здесь.

У меня была игра вокруг на codepen и создал подмешать с сопровождающими функциями для создания отдельных ключевых кадров анимации для вас.

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;
}

Вы назвали бы подмешать, как показано ниже.

.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>
PTD
0

You can have your animation run from 0-30% and leave the rest as a "delay" before the animation repeats

check this: https://css-tricks.com/css-keyframe-animation-delay-iterations/