[css] keyframe 이용하여 svg 애니메이션 만들기

css keyframe 이용하여 svg 파일 일부를 회전, 확대하는 애니메이션 만들기

<svg version="1.1" id="path" xmlns="http://www.w3.org/2000/svg"
                                xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500"
                                style="enable-background:new 0 0 500 500;" xml:space="preserve">
                                <rect id="square" x="108.58" y="108.58"
                                    transform="matrix(0.7071 -0.7071 0.7071 0.7071 -103.5534 250)" class="st0"
                                    width="282.84" height="282.84" />
                                <line id="line_x5F_up" class="st0" x1="250" y1="10" x2="250" y2="250" />
                                <line id="line_x5F_right" class="st0" x1="490.85" y1="250" x2="250.85" y2="250" />
</svg>

✅Illustration에서 svg 가져오기 / html
1) 일러스트로 원하는 파일 제작하기
2) 각 레이어별 애니메이션을 지정하기 쉽도록 레이어 이름 설정해주기
3) svg파일을 가져와 text를 복사해서 html에 붙여 넣기

.st0 {
    fill: none;
    stroke: #FFFFFF;
    stroke-miterlimit: 10;
}

#path{
    width: 600px;
    height: 600px;
}
#line_x5F_up {
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    transform-origin: center ;
    animation-name: circle;
}

@keyframes circle {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
@keyframes scale {
    from{
        transform: scale(0);
    }
    to{
        transform: scale(2);
    }
}
@keyframes circle2 {
    0%{transform: rotate(0deg)}
    25%{transform: rotate(45deg)}
    50%{transform: rotate(90deg)}
    75%{transform: rotate(135deg)}
    100%{transform: rotate(180deg)}
}

✅css
1) 기존 svg에 있던 style 태그를 복사하여 css에 붙여 넣기(html 길이 줄이기 위해)
2) 전체 크기 조정을 위해 id path의 가로와 세로를 지정
3) id line up에 애니메이션 설정을 추가
- animation-duration: 애니메이션이 동작하는 시간(s:초);
- animation-iteration-count: 애니메이션 동작 횟수(infinite:무한);
- animation-fill-mode: 애니메이션 마지막 상태 설정(forwards: 마지막 동작상태 유지);
- transform-origin: transform 작동하는 기준점 (center:중앙 대지를 기준) ;
- animation-name: 동작하고 싶은 애니메이션 이름(circle: 동작할 keyframe명);
4-1) keyframe명 circle을 지정하고 회전 애니메이션을 추가한다
0도 에서 360도로 rotate(회전)하는 transform을 추가
4-2) keyframe명 scale을 지정하고 확대 애니메이션을 추가한다
0에서 2배로 scale(확대 또는 축소)하는 transform을 추가
4-3) keyframe명 circle2를 지정하고 사각형 4각에 맞춰 회전 애니메이션을 추가한다
100을 4로 나누어 %마다 transform 각도를 지정

✔ svg내에 레이어 고정과 레이어 애니메이션이 함께 있으면 html내에 텍스트로 가져와야한다
✔ svg 모든 애니메이션이 한번에 움직일때는 svg파일을 불러와도 된다