[CSS] CSS trick: 배경 그라디언트에 애니메이션 넣기

 

 

css에서 background-image는 animation 적용이 불가능하다. 그런데, 배경의 그라디언트에 애니메이션을 적용하려면 어떻게 하면 좋을까.

 

1. filter 이용하기

filter는 대상에 색조 변경이나 흐림 효과 등의 그래픽 효과를 적용한다. 이는 애니메이션이 가능하기 때문에, 배경 프레임의 그라디언트를 변경하는 애니메이션으로 사용가능하다.

@keyframes changeBackground {
  0% {
    filter: hue-rotate(0deg);
  }
  50% {
    filter: hue-rotate(60deg);
  }

  100% {
    filter: hue-rotate(120deg);
  }
}

.background {
  background-image: linear-gradient(
    120deg,
    rgb(200, 205, 255),
    rgb(123, 81, 145)
  );
  animation: changeBackground 2s ease-in-out alternate infinite forwards;
}

 

2. 별도의 배경 프레임 만들기

그런데, 위 방법에는 한 가지 문제가 있다. filter는 적용 대상의 자식요소까지 적용되기 때문에, 배경 프레임의 하위 요소까지 색상이 이상해진다. 이를 보완하기 위해서 배경 프레임을 자식 요소와 분리시켜 별도의 프레임으로 만든다. 이러면 배경 프레임에 필터를 적용해도 다른 요소들이 영향 받지 않는다.

@keyframes changeBackground {
  0% {
    filter: hue-rotate(0deg);
  }
  50% {
    filter: hue-rotate(60deg);
  }

  100% {
    filter: hue-rotate(120deg);
  }
}

.background {
  width: 100%;
  top: 0;
  z-index: -1;
  background-image: linear-gradient(
    120deg,
    rgb(200, 205, 255),
    rgb(123, 81, 145)
  );
  min-height: 100vh;
  animation: changeBackground 2s ease-in-out alternate infinite forwards;
}