SVG - animation

SVG ANIMATION

svg에 애니메이션을 적용해 봅시다.

---

 

HTML

<svg>
<rect class="ani1"></rect>
</svg>
<svg>
<rect class="ani2"></rect>
</svg>
<svg>
<path class="ani3" fill="none" stroke="#0D47A1" stroke-width="2" d="M7,154.667c0-82.358,65.152-149,145.667-149"/>
</svg>
<svg>
<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>
<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>
<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>

---

CSS

.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;
    }
}

---

예제

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