Использование штрих-черточки - PullRequest
Новая
       13

Использование штрих-черточки

0 голосов
/ 12 июля 2019

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

Итак, в основном я хочу нарисовать стрелку от 0 до 100%, поэтому у меня есть путь вроде: 

 <path class="showUp" fill="#4C9FDC" stroke="#000000" stroke-width= "0" d="M165.15 204.15l-4.49-4.49c-2.13-2.13-5.59-2.14-7.72-.01l-.01.01c-2.13 2.13-2.14 5.59-.01 7.72l.01.01 9.09 9.09a4.418 4.418 0 0 0 6.24 0l50.28-50.28c2.12-2.1 2.13-5.53.03-7.65l-.03-.03c-2.13-2.13-5.59-2.14-7.72-.01l-.01.01-45.66 45.63z"/>

И я хочу анимировать с помощью штриха, например: 

@keyframes Arrow {
 from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}


.showUp {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: Arrow 5s linear forwards;
}

CodePen

Но он просто ничего не делает.Что я там делаю не так?Привет

...