Запустить SVG-анимацию пусто - PullRequest
Новая
       7

Запустить SVG-анимацию пусто

1 голос
/ 25 марта 2020

Я относительно новичок в этой теме c, и я только начал экспериментировать с SVG-анимацией.

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

Вот мой фрагмент кода CodePen: https://codepen.io/PascalRoh/pen/xxbVaXR

  stroke-dashoffset: 500;
   animation: dash2 5.5s ease-in-out infinite;
}
.path3 {
  stroke-dashoffset: 500;
   animation: dash3 5.5s ease-in-out infinite;
}

@keyframes dash2 {
  0% {
  stroke-dashoffset: 0;
  stroke-dasharray: 0, 7900;
  }
  58% {
    stroke-dashoffset: 0px;
    stroke-dasharray: 1200, 600;
  }
   100% {
  stroke-dashoffset: -400px;
  stroke-dasharray: 270, 2300;
  }
}

@keyframes dash3 {
  0% {
  stroke-dashoffset: 0;
  stroke-dasharray: 0, 2400;
  }
   8% {
  stroke-dashoffset: 20;
  stroke-dasharray: 0, 2400;
  }
  78% {
    stroke-dashoffset: 0px;
    stroke-dasharray: 1200, 600;
  }
   100% {
  stroke-dashoffset: -400px;
  stroke-dasharray: 270, 2300;
  }
}
...