transition - 마우스오버(mousehover) 시 부드럽게 변화

독학이야말로 한 번 배우고 이해하면
진정한 내 것이 됩니다.

이번엔 transition 을 기억해 보려합니다.

 

시간설정이 가능하고 투명도(opacity) 값을 줄 수 있기에

 

마우스 클릭 전 선택에 부드러운 효과를 줄 수 있어 고급스러움을 구현할 수 있습니다.

.CLASSNAME:hover { transition: 0.5s ease-out; opacity: 0.5; }

hover { transition: 0.5s ease-out; opacity: 0.5; }

해석 : 마우스 오버시 0.5초동안 50%투명해 진다.

 

마우스오버시 50%의 투명도에서 원래 색상으로 0.5초 동안 부드럽게 변화합니다.

 

여기서 마우스오버가 해제되었을 때 다시 부드럽게 복귀하는 효과를 함께 넣어 주어야

 

제가 원하는 효과가 완성됩니다.

 

.CLASSNAME:not(:hover) { transition: 0.5s ease-out; }

not(:hover) { transition: 0.5s ease-out; }

해석 : 마우스오버 해제시 0.5초 동안 원상태(hover전의 상태)로 돌아온다.

---

투명도로 하는 방법도 좋지만 하다보니까 색상을 넣는 것도 좋더라구요.

.CLASSNAME:hover { transition: 1s ease-out; background: #292929; }
.CLASSNAME:not(:hover) { transition: 0.5s ease-out;}

해석 : 마우스 오버시 1초동안 #292929 색상으로 부드럽게 변하고,

마우스오버 해제시 0.5초 안에 원래의 색으로 돌아온다.

 

그럼 오늘도 하나 더 배우고 갑니다~^^