[HTML/CSS] 움직이는 Gradients 배경 적용하기

오늘은 동적으로 움직이는 그레디언트를 background-image로 적용하는 방법을 알아보겠습니다.

 

 

 

https://webgradients.com/

Free Gradients Collection by itmeo.com

그레디언트 색상 예제는 위 링크를 통해서 선택할 수 있습니다.

 

 

 

<div id="root">
	/* content */
</div>

#root {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(-30deg, #fbb7d4 0%, #a9d4ff 100%);
}

위 링크에서 받아온 background-image를 #root 태그에 적용해보았습니다.

 

 

 

원래 아무것도 없는 배경에서 그레디언트가 적용된 배경으로 변경된 것을 볼 수 있습니다.

 

이번에는 시간에 따라서 배경이 변하도록 구현해보도록 하겠습니다.

 

 

 

@keyframes gradientAnimation {
    0% {
        background-position: 10% 10%;
    }
    100% {
        background-position: 90% 90%;
    }
}

우선 @keyframe 프레임명 {}를 통해서 시간에 따른 애니메이션 시작 지점을 정해줍니다.

 

background-position을 통해서 애니메이션의 몇 % 진행되었을 때 가로 및 세로의 위치를 어디로 지정할지를 결정합니다.

 

background-position이 애니메이션 시작 지점(0%)일 때 0%, 0%를 사용하면 애니메이션 시작 시 하나의 색상이 화면 모두를 차지하므로 10% 정도 이동시켜 주었습니다. 

 

 

 

#root {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(-30deg, #fbb7d4 0%, #a9d4ff 100%);
    background-size: 200% 200%;
    animation: gradientAnimation 4.5s linear infinite alternate;
}

이제  @keyframe으로 만든 프레임을 애니메이션으로 적용시켜주면 됩니다.

 

 

background-size: 200% 200%;

를 적용하여 배경이미지를 실제 이미지 레이아웃보다 크게 확장하였습니다.

 

배경 이미지가 실제 출력할 이미지 레이아웃보다 커야 시점을 이동하면서 바뀌는 것처럼 보이게 됩니다.

 

 

animation: gradientAnimation 5s linear infinite alternate;

을 통해 앞서 만든 @keyframe을 5초 동안 선형적으로 무한히 실행하도록 만들었습니다.

 

추가적으로 alternate를 적용하여 애니메이션이 끝나면(0%에서 100%까지 실행) 다시 0%로 바뀌는 것이 아니라,

역으로 재생하도록 구현하여 화면이 뚝 끊기는 것처럼 보이는 현상을 해결하였습니다.

 

 

 

적용한 움직이는 그레디언트가 배경으로 잘 적용되는 것을 확인할 수 있습니다.