Как контролировать время анимации CSS3

Я работаю над анимацией рисования линий SVG, как показано ниже.

Так что я делаю, это оживить ухо с помощью stroke-dasharray и продолжайте с точками.

Мне удалось закончить рисование ушей, но я не знаю, как контролировать время точек. Ниже приведены мои шаги анимации:

  1. Анимация рисования ушей за 5 секунд
  2. Через 5 с продолжите анимацию точек (анимируйте построчно)
  3. Когда закончите анимацию точек, вернитесь к первому шагу

Это мой код, но он постепенно мигает. Как мне отрегулировать время?

.firstpath {
  stroke-dasharray: 1500;
  animation: firstanimate 5s linear forwards infinite;
}
@keyframes firstanimate {
  from {
    stroke-dashoffset: 1500;
  }
  to {
    stroke-dashoffset: 0;
  }
}
.secondpath {
  stroke-dasharray: 500;
  animation: secondanimate 5s linear forwards infinite;
}
@keyframes secondanimate {
  from {
    stroke-dashoffset: 500;
  }
  to {
    stroke-dashoffset: 0;
  }
}
.thirdpath {
  stroke-dasharray: 500;
  animation: thirdanimate 5s linear forwards infinite;
}
@keyframes thirdanimate {
  from {
    stroke-dashoffset: 500;
  }
  to {
    stroke-dashoffset: 0;
  }
}
.row1col1 {
  animation-delay: 1s;
  animation: blink 2s step-start 0s infinite;
  -webkit-animation: blink 2s step-start 0s infinite;
}
@keyframes blink {
  0% {
    opacity: 1.0;
  }
  50% {
    opacity: 0.0;
  }
  100% {
    opacity: 1.0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 1.0;
  }
  50% {
    opacity: 0.0;
  }
  100% {
    opacity: 1.0;
  }
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="841.89px" height="595.28px" viewBox="0 0 841.89 595.28" enable-background="new 0 0 841.89 595.28" xml:space="preserve">

  <g>
    <path class="firstpath" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
   M253.441,284.167c0,0-0.883-14.535,15.429-18.551c5.364-1.32,15.943-0.665,21.667,6.79c13.859,18.051-3.235,32.286-8.087,37.262
   c-4.853,4.979-7.713,21.027-17.543,20.528c-9.829-0.497-12.69-6.717-12.317-11.818" />

    <path class="secondpath" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
   M285.249,285.252c0,0,0.654-8.212-8.864-10.544c-9.519-2.334-16.796,8.211-10.825,17.449c2.613-1.12,5.226,0.652,5.599,2.52
   c0.373,1.866-1.213,4.199-3.826,4.199" />

    <path class="thirdpath" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
   M257.815,307.553c0,0-3.732,5.879,2.333,8.118c6.065,2.241,5.318-8.118,8.865-9.237c3.545-1.119,11.943-2.519,11.943-10.265
   c0-7.744-6.398-16.451-17.522-11.958" />
  </g>

  <line class="row1col1" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="319.41" y1="287.987" x2="324.156" y2="286.627" />

  <line fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="328.667" y1="285.335" x2="332.744" y2="284.167" />

  <line fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="338.25" y1="301.171" x2="343.41" y2="301.171" />

  <line fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="328.667" y1="301.171" x2="333.75" y2="301.171" />

  <line fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="319.41" y1="301.171" x2="324.156" y2="301.171" />

  <line fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="313.741" y1="314.625" x2="319.41" y2="315.987" />

  <line fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="323.741" y1="316.746" x2="329.667" y2="318.142" />

</svg>

Источник

2 ответа

Решение

То, как формируются части фигуры, это потребует нескольких анимаций ключевых кадров, чтобы работать так, как вы собираетесь.

Вот что вам нужно сделать:

  • Анимация уха, хотя, как ожидается, завершится в 5s Метка не должна начинать свою следующую итерацию до тех пор, пока анимация линий не будет завершена. То есть ухо должно оставаться бездействующим в течение времени, затрачиваемого линиями на завершение анимации. Следовательно, мы должны установить animation-duration для уха, так что он покрывает количество времени, необходимое для линий, чтобы завершить их анимацию. Здесь каждый компонент строки занимает 1s и так всего animation-duration для всех элементов (ушей и линий) будет 12s,
  • Анимация уха должна быть завершена в 5s оценка (из общей продолжительности 12s) и, следовательно, from - to настройку ключевого кадра следует заменить на проценты. Анимация уха должна начинаться с 0% и достичь его завершения в 41% (что примерно 5s отметка). Оттуда он должен держать свою позицию до 100% (12s) отметка (то есть в основном до тех пор, пока линии не завершат анимацию).
  • Каждый линейный компонент должен начинаться после того, как его предыдущая часть завершила анимацию, поэтому row1col1 должен начинаться с 41% это когда ухо становится полностью видимым (до этого момента оно должно оставаться невидимым).
  • row1col1 потребности 1s для анимации (что примерно 8% из 12s) и, следовательно, row1col2 следует подождать до 49% от общей продолжительности, чтобы начать анимацию. так же row2col1 должен начинаться с 57%, row2col2 должен начинаться с 66% и так далее.
  • Если линии должны постепенно исчезать, начните с opacity: 0 в 41% и получить opacity: 1 в 49% (за row1col1 и так далее для отдыха). С другой стороны, если вам нужно, чтобы они появлялись мгновенно, уменьшите процент, где он появляется opacity: 1, Во фрагменте я сделал row1col1 достичь opacity: 1 в 42% сам (который как 0.12s).

Заметки:

  • Я также изменил stroke-dasharray настройки компонентов уха, чтобы избежать задержки, которая была изначально между завершением анимации уха и началом анимации линии.
  • Я бы также порекомендовал вам обратиться за помощью к эксперту SVG, чтобы проверить, нет ли. частей можно свести к минимуму, так как это уменьшит нет. ключевые кадры необходимы и т. д. К сожалению, мои знания SVG ограничены, и поэтому я не могу помочь с этим. 

.firstpath {
  stroke-dasharray: 150;
  animation: firstanimate 12s linear forwards infinite;
}
@keyframes firstanimate {
  0% {
    stroke-dashoffset: 150;
  }
  41% {
    stroke-dashoffset: 0;
  }
}
.secondpath {
  stroke-dasharray: 100;
  animation: secondanimate 12s linear forwards infinite;
}
@keyframes secondanimate {
  0% {
    stroke-dashoffset: 100;
  }
  41% {
    stroke-dashoffset: 0;
  }
}
.thirdpath {
  stroke-dasharray: 65;
  animation: thirdanimate 12s linear forwards infinite;
}
@keyframes thirdanimate {
  0% {
    stroke-dashoffset: 65;
  }
  41% {
    stroke-dashoffset: 0;
  }
}
line {
  opacity: 0;
}
.row1col1 {
  animation: blink 12s linear forwards infinite;
}
@keyframes blink {
  41% {
    opacity: 0;
  }
  42%, 100% {
    opacity: 1;
  }  

}
.row1col2 {
  animation: blink2 12s linear forwards infinite;
}
@keyframes blink2 {
  49% {
    opacity: 0;
  }
  50%, 100% {
    opacity: 1;
  }
}
.row2col1 {
  animation: blink3 12s linear forwards infinite;
}
@keyframes blink3 {
  57% {
    opacity: 0;
  }
  58%, 100% {
    opacity: 1;
  }
}
.row2col2 {
  animation: blink4 12s linear forwards infinite;
}
@keyframes blink4 {
  66% {
    opacity: 0;
  }
  67%, 100% {
    opacity: 1;
  }
}
.row2col3 {
  animation: blink5 12s linear forwards infinite;
}
@keyframes blink5 {
  75% {
    opacity: 0;
  }
  76%, 100% {
    opacity: 1;
  }
}
.row3col1 {
  animation: blink6 12s linear forwards infinite;
}
@keyframes blink6 {
  84% {
    opacity: 0;
  }
  85%, 100% {
    opacity: 1;
  }
}

.row3col2 {
  animation: blink7 12s linear forwards infinite;
}
@keyframes blink7 {
  92% {
    opacity: 0;
  }
  93%, 100% {
    opacity: 1;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="841.89px" height="595.28px" viewBox="0 0 841.89 595.28" enable-background="new 0 0 841.89 595.28" xml:space="preserve">

  <g>
    <path class="firstpath" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
   M253.441,284.167c0,0-0.883-14.535,15.429-18.551c5.364-1.32,15.943-0.665,21.667,6.79c13.859,18.051-3.235,32.286-8.087,37.262
   c-4.853,4.979-7.713,21.027-17.543,20.528c-9.829-0.497-12.69-6.717-12.317-11.818" />

    <path class="secondpath" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
   M285.249,285.252c0,0,0.654-8.212-8.864-10.544c-9.519-2.334-16.796,8.211-10.825,17.449c2.613-1.12,5.226,0.652,5.599,2.52
   c0.373,1.866-1.213,4.199-3.826,4.199" />

    <path class="thirdpath" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
   M257.815,307.553c0,0-3.732,5.879,2.333,8.118c6.065,2.241,5.318-8.118,8.865-9.237c3.545-1.119,11.943-2.519,11.943-10.265
   c0-7.744-6.398-16.451-17.522-11.958" />
  </g>

  <line class="row1col1" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="319.41" y1="287.987" x2="324.156" y2="286.627" />

  <line class="row1col2" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="328.667" y1="285.335" x2="332.744" y2="284.167" />

  <line class="row2col3" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="338.25" y1="301.171" x2="343.41" y2="301.171" />

  <line class="row2col2" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="328.667" y1="301.171" x2="333.75" y2="301.171" />

  <line class="row2col1" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="319.41" y1="301.171" x2="324.156" y2="301.171" />

  <line class="row3col1" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="313.741" y1="314.625" x2="319.41" y2="315.987" />

  <line class="row3col2" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="323.741" y1="316.746" x2="329.667" y2="318.142" />

</svg>

Источник

Вы можете играть с анимацией раз. Задержка работает только для первой анимации. Вы также должны переместить свойства без префикса вперед.

Я сделал анимацию, которая мигает через 2 секунды каждые 5 секунд (всего 5 секунд).

.firstpath {
  stroke-dasharray: 1500;
  animation: firstanimate 5s linear forwards infinite;
}

@keyframes firstanimate {
  from { stroke-dashoffset: 1500; }
  to { stroke-dashoffset: 0; }
}

.secondpath {
  stroke-dasharray: 500;
  animation: secondanimate 5s linear forwards infinite;
}

@keyframes secondanimate {
  from { stroke-dashoffset: 500; }
  to { stroke-dashoffset: 0; }
}

.thirdpath {
  stroke-dasharray: 500;
  animation: thirdanimate 5s linear forwards infinite;
}

@keyframes thirdanimate {
  from { stroke-dashoffset: 500; }
  to { stroke-dashoffset: 0; }
}


.row1col1 {
  animation: blink1 5s step-start 0s infinite;
  -webkit-animation: blink1 5s step-start 0s infinite;
}
@-webkit-keyframes blink1 {
    0% {
    opacity: 1.0;
  }
  70% {
    opacity: 1.0;
  }
  
  80% {
    opacity: 0.0;
  }
  
  100% {
    opacity: 1.0;
  }
}

@keyframes blink1 {
  0% {
    opacity: 1.0;
  }
  70% {
    opacity: 1.0;
  }
  80% {
    opacity: 0.0;
  }
  
  100% {
    opacity: 1.0;
  }
}

.row1col2 {
  animation: blinkl2 5s step-start 0s infinite;
  -webkit-animation: blink2 5s step-start 0s infinite;
}
@-webkit-keyframes blink2 {
  0% {
    opacity: 1.0;
  }
  80% {
    opacity: 1.0;
  }
  
  90% {
    opacity: 0.0;
  }
  
  100% {
    opacity: 1.0;
  }
}
@keyframes blink2 {
  0% {
    opacity: 1.0;
  }
  80% {
    opacity: 1.0;
  }
  
  90% {
    opacity: 0.0;
  }
  
  100% {
    opacity: 1.0;
  }
}
.row1col3 {
  animation: blinkl3 5s step-start 0s infinite;
  -webkit-animation: blink3 5s step-start 0s infinite;
}
@-webkit-keyframes blink2 {
  0% {
    opacity: 1.0;
  }
  90% {
    opacity: 1.0;
  }
  
  95% {
    opacity: 0.0;
  }
  
  100% {
    opacity: 1.0;
  }
}
@keyframes blink3 {
  0% {
    opacity: 1.0;
  }
  90% {
    opacity: 1.0;
  }
  
  95% {
    opacity: 0.0;
  }
  
  100% {
    opacity: 1.0;
  }
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  width="841.89px" height="595.28px" viewBox="0 0 841.89 595.28" enable-background="new 0 0 841.89 595.28" xml:space="preserve">
  
 <g>
  <path class="firstpath" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
   M253.441,284.167c0,0-0.883-14.535,15.429-18.551c5.364-1.32,15.943-0.665,21.667,6.79c13.859,18.051-3.235,32.286-8.087,37.262
   c-4.853,4.979-7.713,21.027-17.543,20.528c-9.829-0.497-12.69-6.717-12.317-11.818"/>
   
  <path class="secondpath" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
   M285.249,285.252c0,0,0.654-8.212-8.864-10.544c-9.519-2.334-16.796,8.211-10.825,17.449c2.613-1.12,5.226,0.652,5.599,2.52
   c0.373,1.866-1.213,4.199-3.826,4.199"/>
   
  <path class="thirdpath" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
   M257.815,307.553c0,0-3.732,5.879,2.333,8.118c6.065,2.241,5.318-8.118,8.865-9.237c3.545-1.119,11.943-2.519,11.943-10.265
   c0-7.744-6.398-16.451-17.522-11.958"/>
 </g>

 <line class="row1col1" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="319.41" y1="287.987" x2="324.156" y2="286.627"/>

 <line class="row1col2" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="328.667" y1="285.335" x2="332.744" y2="284.167"/>

 <line class="row1col3" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="338.25" y1="301.171" x2="343.41" y2="301.171"/>

 <line class="row1col2" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="328.667" y1="301.171" x2="333.75" y2="301.171"/>

 <line class="row1col1" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="319.41" y1="301.171" x2="324.156" y2="301.171"/>

 <line class="row1col1" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="313.741" y1="314.625" x2="319.41" y2="315.987"/>

 <line class="row1col2" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="323.741" y1="316.746" x2="329.667" y2="318.142"/>

Источник
Другие вопросы по тегам