[CSS]부드럽게 나타나는 텍스트

텍스트 하나하나 부드럽게 나타나는 효과에 대해 알아보자.
물론 TypeIt같은 멋진 라이브러리도 있지만
순수 하드코딩으로 효과를 내보고 싶었다.

HTML

<div>
	<p>
    	<span>G</span>
        <span>L</span>
        <span>O</span>
        <span>B</span>
        <span>A</span>
        <span>L</span>
    </p>
    <p>
    	<span>R</span>
        <span>E</span>
        <span>T</span>
        <span>A</span>
        <span>I</span>
        <span>L</span>
        <span>&nbsp</span>
        <span>T</span>
        <span>E</span>
        <span>C</span>
        <span>H</span>
    </p>
    <p>
        <span>L</span>
        <span>E</span>
        <span>A</span>
        <span>D</span>
        <span>E</span>
        <span>R</span>
    </p>
</div>

css

span {
	opacity: 0;
}

@keyframes fade {
  to {
    opacity: 1;
  }
}

기본 투명도를 0으로 주고,
투명도를 1로 변경되는 애니메이션을 만들어준다.

javascript

const introText = document.querySelectorAll("span");

window.onload = () => {
  let timer = 100;
  introText.forEach((item) => {
    item.style.animation = `fade 500ms ${(timer += 50)}ms forwards`;
  });
};

텍스트 요소 전체를 변수에 지정하고
기본 타이머를 지정한 후에(animation delay값)
반복문을 통해 각각 요소에 기본타이머 + 50ms씩 추가되도록 설정했다.

결과화면

끝.