[CSS] 좌우 이동하는 텍스트 그라디언트 애니메이션 만들기

 

텍스트 그라디언트 애니메이션입니다.

text의 배경을 360%로 설정하고 3가지 배경이 좌우 반복 이동하는 방식입니다.

 

예제

 

See the Pen 텍스트 그라디언트 by Kim Ui Hyun (@uihyunKimm) on CodePen.

코드

.text {
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
       }

-webkit-background-clip : 배경 영역에 대한 설정으로 border-box, padding-box, content-box, text 등의 형태로 삽입이 가능합니다. 

-webkit-text-fill-color: transparent : 기존 컬러를 투명하게 바꾸고, 배경이 좌우로 이동하기 위한 사전 작업입니다.

 

.text {
        animation: animated_text 6s ease-in-out infinite;
        -moz-animation: animated_text 5s infinite;
        -webkit-animation: animated_text 5s ease-in-out infinite;
    }

 

여기서 같은 애니메이션이 위와 같이 여러번 쓰여있는 이유에 대해 간략히 설명드리면

 

-webkit
Chrome (blink,webkit), Safari(webkit), Opera(blink)

-moz

Firefox(gecko)

-o

Opera(presto)

-ms

for Internet Explorer(Trident). 

 

이렇게 사용 환경에 따라 구분되는 것입니다.

 

 

위에서 명명한 애니메이션을 세 단계로 나눠 움직임을 아래와 같이 정의 했습니다.

@keyframes animated_text {
            0% {
                background-position: 0px 100%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0px 100%;
            }
        }