CSS 그라디언트 transition 적용 방법

 

안녕하세요 찐망고입니다.

 

CSS에서 그라디언트는 background-image 속성으로 적용됩니다.

그러나 그라디언트는 직접적인 값의 변화가 아니라, 하나의 이미지처럼 렌더링 되기 때문에

CSS의 `transition` 속성을 사용해도 그라디언트의 색상이나 위치가 부드럽게 변화하지 않습니다.

그래서 그걸 해결하려면!!

 

가상 요소를 사용하기

가상 요소(::before 또는 ::after)를 사용하여 기존 요소 위에 그라디언트를 덮고,

opacity 속성을 이용해 부드럽게 보였다 안보였다 하도록 설정합니다.

.element {
  position: relative;
  width: 200px;
  height: 200px;
}

.element::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, transparent, blue);
  transition: opacity 0.5s;
  opacity: 0;
}

.element:hover::before {
  opacity: 1;
}

 

위 코드에서 흰색에서 그라디언트가 적용된다고 가정하에 (브라우저가 흰색)

::before 가상 요소가 `. element`요소 위에 위치하여 그라디언트를 제공합니다.

이 가상 요소는 초기 상태에서 opacity: 0으로 설정되어 보이지 않다가,

마우스를 올리면 opacity: 1로 변경되어 부드럽게 나타납니다.

 

참고로 opacity는 상속됩니다. 부모요소에 적용하면 자식요소까지 모두 불투명도가 적용되므로

가상요소를 사용해서 작업해야 합니다.