CSS3 Background Gradient에 Transition 적용하기.

210922 오늘 혼자 포트폴리오 제작겸 animation을 적용한 예제를 만들다가 background에 grandient를 주고 transition을 설정하면 적용이 되지 않는 것을 발견했다.
이는 before, after를 활용하여 해결할 수 있었다.

Must Remember

• 그라디언트를 적용하고자 하는 요소에 가상 요소를 만들어 opacity 0으로 보이지 않게 하고 hover를 하면 1로 나타나도록 한다.

.shape-box > span {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.shape-box > span:after {
  opacity: 0;
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(-45deg, #aa4b6b, #6b6b83, #3b8d99);
  transition: all 0.5s linear 0s;
}
.shape-box:hover > span:after {
  opacity: 1;
}