css만으로 SVG 이미지 애니메이션 효과 적용하기

SVG 코드 확보

이미지를 SVG 확장자로 저장하고 브라우저나 editor로 열어보면 아래와 같은 코드가 확인 되는데, html 페이지에 붙여넣으면 이미지가 그대로 표시된다.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 450 1280 120" style="enable-background:new 0 450 1280 120;" xml:space="preserve">
    <path style="fill:#3D3935;" class="logo_svg" d="M271.475,519.44l-9.997-6.073c-6.27-3.829-10.732-7.595-13.384-11.301
        c-2.653-3.705-3.979-7.967-3.979-12.791c0-7.235,2.509-13.109,7.532-17.626c5.017-4.515,11.539-6.774,19.563-6.774
        c7.673,0,14.71,2.154,21.112,6.461v14.93c-6.621-6.369-13.743-9.552-21.372-9.552c-4.3,0-7.828,0.993-10.592,2.98
        c-2.76,1.988-4.142,4.532-4.142,7.631c0,2.752,1.019,5.329,3.053,7.732c2.035,2.402,5.304,4.923,9.815,7.565l10.044,5.946
        c11.209,6.693,16.812,15.213,16.812,25.56c0,7.367-2.468,13.352-7.4,17.955c-4.933,4.604-11.344,6.906-19.236,6.906
        c-9.078,0-17.342-2.79-24.795-8.37v-16.705c7.103,9.001,15.326,13.5,24.663,13.5c4.121,0,7.553-1.147,10.293-3.441
        c2.74-2.294,4.11-5.165,4.11-8.617C283.578,529.763,279.543,524.459,271.475,519.44z"/>
    <path style="fill:#3D3935;" class="logo_svg" d="M371.472,558.99c-13.828,0-25.345-4.434-34.555-13.3c-9.215-8.867-13.817-19.977-13.817-33.331
        c0-13.705,4.639-25.045,13.913-34.021c9.275-8.975,21.005-13.463,35.18-13.463h56.48c14.175,0,25.978,4.488,35.411,13.463
        c9.428,8.976,14.141,20.228,14.141,33.758c0,13.529-4.758,24.728-14.274,33.594c-9.518,8.866-21.518,13.3-35.999,13.3H371.472z
            M428.805,546.905c10.234,0,18.777-3.35,25.623-10.049c6.845-6.699,10.268-15.04,10.268-25.023
        c0-9.721-3.423-17.897-10.268-24.531c-6.845-6.633-15.257-9.95-25.229-9.95h-56.48c-10.501,0-19.13,3.284-25.887,9.852
        c-6.757,6.568-10.138,14.953-10.138,25.155c0,9.896,3.392,18.127,10.169,24.694c6.783,6.568,15.269,9.852,25.462,9.852H428.805z"
        />
    <path style="fill:#3D3935;" class="logo_svg" d="M510.33,465.994h48.995V477.7h-35.843v25.649h35.843v11.707h-35.843v42.814H510.33V465.994z"/>
    <path style="fill:#3D3935;" class="logo_svg" d="M593.78,557.871v-91.877h23.018c9.294,0,16.671,2.301,22.131,6.905
        c5.46,4.604,8.189,10.829,8.189,18.678c0,5.35-1.338,9.975-4.011,13.876c-2.676,3.903-6.513,6.82-11.51,8.747
        c2.937,1.931,5.808,4.561,8.616,7.892c2.804,3.333,6.75,9.143,11.837,17.43c3.2,5.218,5.765,9.141,7.696,11.772l4.865,6.576
        h-15.652l-4.008-6.053c-0.132-0.218-0.391-0.591-0.787-1.12l-2.562-3.618l-4.072-6.711l-4.399-7.173
        c-2.717-3.773-5.205-6.776-7.465-9.008c-2.26-2.232-4.303-3.84-6.124-4.826c-1.82-0.983-4.882-1.476-9.183-1.476h-3.425v39.986
        H593.78z M610.879,477.173h-3.946v29.004h4.997c6.665,0,11.235-0.569,13.715-1.711c2.477-1.138,4.405-2.86,5.787-5.162
        c1.382-2.301,2.07-4.921,2.07-7.858c0-2.894-0.767-5.514-2.301-7.86c-1.535-2.345-3.695-4-6.478-4.964
        C621.938,477.657,617.325,477.173,610.879,477.173z"/>
    <path style="fill:#3D3935;" class="logo_svg" d="M716.673,465.73h9.244l41.197,92.404h-13.463l-12.245-27.227h-39.2l-11.479,27.227h-13.519
        L716.673,465.73z M735.999,519.201l-14.824-33.279l-13.746,33.279H735.999z"/>
    <path style="fill:#3D3935;" class="logo_svg" d="M848.575,466.429h13.22v52.152c0,7.061-0.515,12.387-1.546,15.982
        c-1.031,3.596-2.301,6.588-3.814,8.979c-1.514,2.39-3.367,4.527-5.556,6.412c-7.28,6.27-16.794,9.404-28.545,9.404
        c-11.97,0-21.572-3.114-28.805-9.341c-2.193-1.927-4.045-4.086-5.559-6.476c-1.51-2.391-2.76-5.316-3.747-8.781
        c-0.987-3.463-1.481-8.901-1.481-16.31v-52.022h13.22v52.152c0,8.639,0.987,14.646,2.96,18.021
        c1.973,3.377,4.976,6.082,9.01,8.122c4.034,2.038,8.791,3.058,14.272,3.058c7.804,0,14.162-2.039,19.071-6.117
        c2.587-2.192,4.449-4.778,5.59-7.76c1.139-2.982,1.71-8.09,1.71-15.325V466.429z"/>
    <path style="fill:#3D3935;" class="logo_svg" d="M1022.703,465.995H1035v91.875h-13.217v-71.602l-33.202,41.751h-2.433l-79.929-47.67v77.521
        h-13.151v-91.875h12.453l79.494,47.406L1022.703,465.995z"/>
</svg>

• <g> 태그는 그래픽 툴에서의 레이어 개념이므로 필요에 따라 삭제해도 무관
• 여기서는 <path> 태그 하나 당 애니메이션을 지정할 수 있으므로 id 또는 class 등 지시자를 지정
• 포토샵에서 저장한 SVG 파일 내 각각의 레이어가 <g>, <path>, <image> 태그일 수 있다

 

css 애니메이션 설정

.logo_svg {
	-webkit-animation: kaboom 2s ease alternate;
			animation: kaboom 2s ease alternate;
}
.logo_svg:nth-child(2) {
	-webkit-animation-delay: 0.1s;
			animation-delay: 0.1s;
}
.logo_svg:nth-child(3) {
	-webkit-animation-delay: 0.2s;
			animation-delay: 0.2s;
}
.logo_svg:nth-child(4) {
	-webkit-animation-delay: 0.3s;
			animation-delay: 0.3s;
}
.logo_svg:nth-child(5) {
	-webkit-animation-delay: 0.4s;
			animation-delay: 0.4s;
}
.logo_svg:nth-child(6) {
	-webkit-animation-delay: 0.5s;
			animation-delay: 0.5s;
}
.logo_svg:nth-child(7) {
	-webkit-animation-delay: 0.6s;
			animation-delay: 0.6s;
}

@-webkit-keyframes kaboom {
	90% {
		opacity: 0;
    }
    100% {
		opacity: 1;
    }
}
  
@keyframes kaboom {
    90% {
		opacity: 0;
    }
    100% {
		opacity: 1;
    }
}

kaboom 은 element의 속성 같은 것이 아니고, 애니메이션의 효과를 지정하기 위한 변수명이라 자유롭게 명명.