728x90
반응형
일러스트로 그래프를 그린 후 svg 로 저장한다.
선을 그리는 애니메이션
@keyframes lineAni{
0%{stroke-dashoffset: 500;stroke: #000000;}
100%{stroke-dashoffset: 0; stroke: #000000;}
}
점은 흰색이였다 색이 나타나게 한다
@keyframes cirAni{
0%{}
100%{fill: orange;}
}
animation-delay 를 통해 간격조정한다.
728x90
반응형
'CSS > SVG' 카테고리의 다른 글
[SVG] svg scale 애니메이션 효과 적용하는 방법 (133) | 2019.08.01 |
---|---|
[SVG]svg 애니메이션 - rotate animtaion 적용하기 (603) | 2019.05.30 |
[SVG] 체크박스에 SVG 로 애니메이션 효과 넣기 (3382) | 2019.05.30 |
[SVG]텍스트 애니메이션 효과 관련 참고 사이트 (406) | 2019.05.27 |
[SVG]svg시작해보기 4 - path그리기 애니메이션 (415) | 2019.05.27 |
댓글