Задержка между повторениями анимации CSS - PullRequest
Новая
       23

Задержка между повторениями анимации CSS

0 голосов
/ 05 января 2019

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

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

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

Ответы [ 3 ]

0 голосов
/ 05 января 2019

Вы можете сделать это следующим образом, то есть создать неактивную фазу в соответствии с состояниями ключевых кадров: 

@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>
0 голосов
/ 05 января 2019

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

Я потренировался на 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>
0 голосов
/ 05 января 2019

Вы можете запустить анимацию на 0-30%, а остальное оставить как «задержку» до повторения анимации

проверьте это: https://css -tricks.com / css-keyframe-animation-delay-iterations /

...