css만으로 SVG 이미지 애니메이션 효과 적용하기
SVG 코드 확보 이미지를 SVG 확장자로 저장하고 브라우저나 editor로 열어보면 아래와 같은 코드가 확인 되는데, html 페이지에 붙여넣으면 이미지가 그대로 표시된다. 태그는 그래픽 툴에서의 레이어 개념이므로 필요에 따라 삭제해도 무관 여기서는 태그 하나 당 애니메이션을 지정할 수 있으므로 id 또는 class 등 지시자를 지정 포토샵에서 저장한 SVG 파일 내 각각의 레이어가 , , 태그일 수 있다 css 애니메이션 설정 .logo_svg { -webkit-animation: kaboom 2s ease alternate; animation: kaboom 2s ease alternate; } .logo_svg:nth-child(2) { -webkit-animation-delay: 0.1s; ani..
