Массив штрихов SVG CSS анимация меняет курс? - PullRequest
Новая
       26

Массив штрихов SVG CSS анимация меняет курс?

0 голосов
/ 03 октября 2019

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

Странно то, что движение кажется обратным на полпути. Может кто-нибудь помочь с этим? Я уверен, что это на самом деле не наоборот, но математика вызывает неожиданный визуальный эффект. 

.path {
  stroke-dasharray: 10;
  stroke-dashoffset: 10 30;
  animation: dash 5s linear infinite;
}

@keyframes dash {
   50%{
    stroke-dashoffset: 35%;
    stroke-dasharray: 0 87.5%;
  }
}
<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="340px" height="333px" viewBox="0 0 340 333" enable-background="new 0 0 340 333" xml:space="preserve">

  <path class="path" fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8
	s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41
	C46.039,146.545,53.039,128.545,66.039,133.545z"/>
  
</svg>

Для реквизита вышеприведенная версия представляет собой очень вареную версию этой прекрасной работы .

1 Ответ

0 голосов
/ 03 октября 2019

за MDN

Если правило ключевого кадра не определяет начальное или конечное состояния анимации (то есть 0% / от и 100% / до), браузеры будут использовать существующие стили элемента для начального / конечного состояний. Это может быть использовано для анимации элемента из его начального состояния и обратно.

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

...