[CSS] linear-gradient에 transition 적용하기

안녕하세요. J4J입니다.

 

이번 포스팅은 linear-gradient에 transition 적용하는 방법에 대해 적어보는 시간을 가져보려고 합니다.

 

 

 

일반적인 경우

 

linear-gradient에 transition을 적용한 결과물을 만들기 위해 일반적으로 다음과 같은 형태의 코드를 작성할 것입니다.

 

See the Pen linearGradientTransition-problem by 김 성찬 (@ksccmp) on CodePen.

 

 

반응형

 

 

위의 코드는 버튼을 클릭할 때마다 배경색을 입혀주는 코드입니다.

 

배경색은 linear-gradient로 입혀주고 transition을 적용했기 때문에 일반적으로 위의 코드에서 결과물이 transition에 적용된 시간 동안 천천히 배경색이 입혀지는 것을 생각할 수 있습니다.

 

하지만 테스트를 해보면 transition을 사용하지 않은 것과 같이 한순간에 배경색이 입혀지는 것을 확인할 수 있습니다.

 

이런 결과를 확인할 수 있는 이유는 linear-gradient에는 transition이 적용되지 않는다고 합니다.

 

즉, 일반적으로 transition 효과를 주기 위해 사용하던 방식은 정상 동작이 되지 않습니다.

 

 

 

해결 방법

 

그렇다고 transition 효과를 linear-gradient에 줄 수 없는 것은 아닙니다.

 

이를 위한 해결방법으로는 다음과 같이 하나의 마크업요소에 transition이 적용되는 착각을 만드는 코드를 구현하면 됩니다.

 

See the Pen linearGradientTransition-solve by 김 성찬 (@ksccmp) on CodePen.

 

 

728x90

 

 

위의 코드는 before, after에 transition을 이용하여 변경하려는 색상을 각각 입력한 것입니다.

 

그리고 transition 효과를 주기 위해 before, after에 opacity를 적용하여 before의 opacity가 1이면 after의 opacity가 0이 되도록 하거나 또는 그 반대의 값을 줌으로써 자연스럽게 transition 효과를 주고 있습니다.

 

이 외에도 여러 방법들이 있으니 편한 방법을 택하여 linear-gradient에 transition을 적용해볼 수 있습니다.

 

 

 

 

 

 

이상으로 linear-gradient에 transition 적용하는 방법에 대해 간단하게 알아보는 시간이었습니다.

 

읽어주셔서 감사합니다.