텍스트 효과 애니메이션

⭐️ 애니메이션 효과 : 텍스트 효과 ⭐️

---

01. 애니메이션 효과

애니메이션(Animation) 효과는 HTML 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시킵니다.
애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 연속된 장면(sequence)를 나타내는 복수의 키프레임(@keyframes)들로 이루어집니다.

   ___ 참고하기 ___
  `1   @keyframes : CSS 애니메이션에서 구간을 정하고 각 구간별로 어떤 스타일을 적용시킬지 정합니다.

---

02. 눈에 띄는 텍스트 효과 만들기

[1] < div > 박스 만들기

svg 태그를 만들어 줍니다.

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

---

[2] CSS 설정하기

@keyframes 을 이용하여 애니메이션의 움직임을 조절합니다.

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

결과보기