linear-gradient 속성에 transition 적용하기

CSS transition 속성으로 엘레멘트의 위치, 크기, 컬러 등이 변경될 때 부드러운 전환 효과를 넣을 수 있다.

하지만 일반적인 백그라운드 컬러와 달리, linear-gradient 를 사용한 백그라운드 컬러에는 transition 속성값이 적용되지 않는다.

 

그래서 여기서 트릭을 사용해야 한다

- 부모 요소에 가상 요소인 ::before 혹은 ::after를 만든다.

• 변화 하고 싶은 색을 linear-gradient를 사용해 입력한다.
• transition의 time값을 지정한다.
• absolute을 사용해 부모 요소와 포지션이 완전히 겹치도록 만든다.
• opacity 값은 0으로 설정한다. (중요!!)

- 마지막으로 hover했을때 opacity가 1이되도록 속성을 추가하면 끝이다.

 

Smooth gadient

 

그라디언트를 적용하고자 하는 요소의 가상 요소를 만들어 opacity 0으로 보이지 않게 했다가 hover를 하면 opacity 1로 나타나도록 하는 방법을 이용해 linear-gradient에 부드러운 움직임 효과를 넣는 방법이다.

 

.gradient1{
    position: relative;
    width: 600px;
    height: 150px;
    background: #ccc;
    &::after {
        content: '';
        opacity: 0;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transition: all 0.3s linear;
        background: linear-gradient(180deg, rgba(0,97,255,1) 0%, rgba(141,226,255,1) 100%);         
      }
    &:hover::after{
        opacity: 1;
    }
}