Text 애니메이션

Text 애니메이션

Code pen을 사용하여 텍스트 애니메이션을 만들었습니다.

---

HTML

viewBox는 svg 요소가 그려지는 영역에서, svg 요소의 크기를 확대 또는 축소 그리고 위치를 조정할 수 있는 속성입니다.
viewBox 속성의 값은 다음과 같습니다.(viewBox="<min-x> <min-y> <width> <height>")
text-anchor는 가운데 정렬 속성 값입니다.

<svg viewBox="0 0 1320 300">
    <text x="50%" y="50%" dy="40px" text-anchor="middle">coturtle</text>
</svg>

CSS

stroke-dashoffset 그림이 어떤 지점에서부터 시작할지 정해주는 속성입니다.
stroke-dasharray는 선을 dashed 형태로 만들어 주는 속성입니다.
애니메이션 효과를 1번 반복하고 텍스트의 외곽선이 5초동안만 나타나도록 설정해줍니다.
위의 두 가지 속성을 사용해 글씨체가 서서히 나타나는 애니메이션을 만들 수 있습니다.

@font-face {
    font-family: 'OKChan';
    font-weight: normal;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/ok/OKChan.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/ok/OKChan.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/ok/OKChan.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/ok/OKChan.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/ok/OKChan.ttf') format("truetype");
    font-display: swap;
}

body {
    background-color: #e3f2fd;
}

svg {
    font-family: 'OKChan';
    font-size: 140px;
    position: absolute;
    width: 100%;
    height: 100%;
    text-transform: uppercase;
    animation: stroke 5s 1 alternate;
    fill: rgba(72, 138, 204, 1);
}

@keyframes stroke {
    0% {
        stroke-dashoffset: 25%;
        stroke-dasharray: 0 50%;
        fill: rgba(72, 138, 204, 0);
        stroke: rgba(54, 95, 160, 1);
        stroke-width: 2;
    }

    70% {
        fill: rgba(72, 138, 204, 0);
        stroke: rgba(54, 95, 160, 1);
    }

    80% {
        fill: rgba(72, 138, 204, 0);
        stroke: rgba(54, 95, 160, 1);
    }

    100% {
        stroke-dashoffset: -25%;
        stroke-dasharray: 50% 0;
        fill: rgba(72, 138, 204, 1);
        stroke: rgba(54, 95, 160, 0);
        stroke-width: 0;
    }
}