CSS(SVG) 애니메이션 - 글씨 효과

SVG 애니메이션 연습하기

SVG를 이용해 애니메이션 글씨 효과를 연습해보겠습니다

---

결과

HTML

svg에 박스 크기를1320 300으로 지정해주고, x, y 50프로 middle을 이용해 가운데로 맞춰주고 y축을 따라 40px씩 따라주게 갑니다.

<svg viewBox="0 0 1320 300">
    <text x="50%" y="50%" dy="40px" text-anchor="middle">김치치즈스마일</text>
</svg>

CSS

0퍼 70퍼 80퍼 100퍼로 나누어준뒤 선을따라 그려지면서 글씨 틀을 잡은뒤 마지막에 테두리가 사라지면서 나타나고 안에 색이 차는 애니메이션을 만들어줍니다.

@font-face {
    font-family: 'OKDdung';
    font-weight: normal;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/ok/OKDdung.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/ok/OKDdung.eot?#iefix') format('embedded-opentype'),
         url('https://cdn.jsdelivr.net/gh/webfontworld/ok/OKDdung.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/gh/webfontworld/ok/OKDdung.woff') format('woff'),
         url('https://cdn.jsdelivr.net/gh/webfontworld/ok/OKDdung.ttf') format("truetype");
    font-display: swap;
}
body {
  background-color: lemonchiffon;
}
svg {
  font-family: 'OKDdung';
  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;
  }
}

코드팬 보기