css 애니메이션 - 텍스트 그라데이션

텍스트 추가

<div style="padding: 100px;">
	<span class="kmi-chat-content-loading">
		매우매우 로딩중입니다....
    </span>
</div>

css 추가

@keyframes gradient-move {
	0% {
    	background-position: 200% 0;
    }
    100% {
    	background-position: -200% 0;
    }
}
.kmi-chat-content-loading {
	background: linear-gradient(90deg, rgba(72, 78, 86, 0.2) 0%, rgba(72, 78, 86, 1) 50%, rgba(72, 78, 86, 0.2) 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    animation: gradient-move 5s linear infinite;
}

• 일단 background에 gradient를 주는데 애니메이션으로 background-position값을 계속 바꿀것이기 때문에 이어지는 효과를 주기 위해서 50% 가운데부분을 제일 opacity를 높게주고 0퍼센트와 100퍼센트는 opacity를 작게준다.

• 속성 설명

-webkit-background-clip: text;
설명: 이 속성은 요소의 배경 이미지나 그라데이션이 텍스트의 형태를 따라 잘려나가도록 설정한다. 즉, 배경이 텍스트의 모양에 맞춰져서 표시된다.

-webkit-text-fill-color: transparent;
설명: 이 속성은 텍스트의 색상을 투명하게 만든다. 이렇게 하면 텍스트의 색상은 보이지 않고 배경이 텍스트를 통해 보이게 된다.

background-clip: text;
설명: -webkit-background-clip: text;의 표준 속성으로, 동일하게 배경 이미지나 그라데이션을 텍스트 모양으로 잘라서 적용한다.

text-fill-color: transparent;
설명: -webkit-text-fill-color: transparent;의 표준 속성으로, 동일하게 텍스트 색상을 투명하게 만든다.