CSS 애니메이션 만들기 : SVG

CSS : SVG 애니메이션 만들기

SVG로 도형 만드는 방법을 알게 되었으니, 더 나아가 SVG에 애니메이션 효과를 주는 방법에 대하여 알아보도록 하겠습니다.

---

1. HTML로 도형 만들기

<div class="svgBox svg8">
    <svg>
        <rect class="ani1"></rect>
    </svg>
    <svg>
        <rect class="ani2"></rect>
    </svg>
    <svg style="background: #E3F3FD">
        <path class="ani3" fill="none" stroke="#0D47A1" stroke-width="2" d="M7,154.667c0-82.358,65.152-149,145.667-149"/>
    </svg>
    <svg style="background: #E3F3FD">
        <path class="ani4" fill="none" stroke="#0D47A1" stroke-width="2" d="M151.534,123.547c-33.711,33.711-88.369,33.711-122.08,0
        c-26.97-26.969-26.97-70.695,0-97.665c21.575-21.576,56.556-21.576,78.131,0c17.261,17.26,17.261,45.245,0.001,62.504
        c-13.809,13.809-36.196,13.809-50.005,0c-11.046-11.046-11.046-28.956,0-40.002c8.837-8.837,23.166-8.837,32.003,0
        c7.069,7.07,7.07,18.532,0,25.602c-5.656,5.657-14.826,5.657-20.482,0c-4.524-4.524-4.524-11.86,0-16.385"/>
    </svg>
    <svg style="background: #E3F3FD">
        <path class="ani5" fill="none" stroke="#0D47A1" stroke-width="2" d="M58.665,139.312c0-6.873,42-6.873,42-13.747s-42-6.874-42-13.748
        s42-6.874,42-13.748c0-6.872-42-6.872-42-13.744c0-6.874,42-6.874,42-13.747c0-6.877-42-6.877-42-13.753
        c0-6.874,42-6.874,42-13.748c0-6.878-42-6.878-42-13.757s42-6.879,42-13.758"/>
    </svg>
    <svg style="background: #E3F3FD">
        <path class="ani6" fill="none" stroke="#0D47A1" stroke-width="2" d="M93.108,91.478c42.049,30.58-13.048,57.425-13.347,6.503
        c0.299,50.922-55.041,24.58-13.405-6.381c-41.636,30.961-55.545-28.728-3.37-14.458c-52.176-14.27-14.181-62.359,9.204-11.649
        c-23.385-50.71,37.901-50.989,14.846-0.067c23.055-50.922,61.484-3.179,9.309,11.565C148.521,62.245,135.157,122.058,93.108,91.478
        z"/>
    </svg>
</div>

2. CSS로 애니메이션 효과 추가하기

stroke-dasharray 속성은 선을 대쉬 형태로 만들며, 값을 부여한 만큼 대쉬 길이가 늘어납니다. 만약 svg의 path 길이가 100이고, dasharray의 길이를 50으로 설정하면, SVG는 절반만 보이게 되는 것입니다. 한편, stroke-dashoffset 속성은 그림이 어떤 부분에서부터 시작할지 정하는 속성입니다.

.ani1 {
    width: 100px; height: 100px;
    x: 30px; y: 30px;
    fill: none;
    stroke: #880E41;
    stroke-width: 2px;
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    animation: ani1 1s infinite linear alternate-reverse;
}
@keyframes ani1 {
    0%   {stroke-dashoffset: 50;}
    100% {stroke-dashoffset: 0;}
}
.ani2 {
    width: 100px; height: 100px;
    x: 30px; y: 30px;
    fill: none;
    stroke: #880E41;
    stroke-width: 2px;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: ani2 2s infinite linear alternate-reverse;
}
@keyframes ani2 {
    0%   {stroke-dashoffset: 400;}
    100% {stroke-dashoffset: 0;}
}
.ani3 {
    animation: ani3 1s infinite linear alternate-reverse;
    stroke-dasharray: 230px;
    stroke-dashoffset: 230px;
}
@keyframes ani3 {
    0%   {stroke-dashoffset: 230px;}
    100% {stroke-dashoffset: 0;}
}
.ani4 {
    animation: ani4 1s infinite linear alternate-reverse;
    stroke-dasharray: 605px;
    stroke-dashoffset: 605px;
}
@keyframes ani4 {
    0%   {stroke-dashoffset: 605px;}
    100% {stroke-dashoffset: 0;}
}
.ani5 {
    animation: ani5 1s infinite linear alternate-reverse;
    stroke-dasharray: 411px;
    stroke-dashoffset: 411px;
}
@keyframes ani5 {
    0%   {stroke-dashoffset: 411px;}
    100% {stroke-dashoffset: 0;}
}
.ani6 {
    animation: ani6 1s infinite linear alternate-reverse;
    stroke-dasharray: 614px;
    stroke-dashoffset: 614px;
}
@keyframes ani6 {
    0%   {stroke-dashoffset: 614px;}
    100% {stroke-dashoffset: 0;}
}

3. fantastic result

4. 보너스 예제

다음과 같이 SVG 태그로 텍스트를 작성하고, keyframes를 사용하여 텍스트 애니메이션을 만들 수도 있습니다. 자세한 소스는 HTML, CSS 버튼을 클릭하면 볼 수 있습니다.

See the Pen Text Animation by mj0614k (@mj0614k) on CodePen.