stroke-dasharray, stroke-dashoffset

스트로크 에니메이션을 구성하려면 구성요소인 stroke-dasharray와 stroke-dashoffset에 대해 잘이해해야 한다.

 

See the Pen Untitled by kimminse (@bjche) on CodePen.

 

해당 소스는 css에니메이션으로 구성한 기본적인 형태이며 조건에 맞는 퍼포먼스를 위해서는 자바스크립트를 활용하는것이 좋다.

 

stroke-dasharray, stroke-dashoffset은 점선의 간격과 시작점의 간격이라고 이해하였다.

또한 선의 길이는 레이아웃의 가로값이나 높이값이 아닌 그려진 스트로크 자체의 길이이다.