• 카테고리

    질문 & 답변
  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

질문!

21.04.12 17:23 작성 조회수 146

0

transition은 값이 숫자(수치)로 표현되는 속성 값의 변화가 있을 때, 그 중간 과정을 애니매이션으로 만들어준다

라고 하셨는데요.

.box {
	width: 100px;
	height: 100px;
	border: 2px solid black;
	background: rgba(255, 255, 0, 0.7);
	transition: 0.5s; // 값이 숫자로 표현되는 속성이 값의 변화가 있을 때, 그 중간 과정을 애니매이션으로 만들어준다.
}

.box:hover {
	width: 200px;
	background: red;
}

여기서 box:hover에 transition을 주면 안되나요?

hover에 줬다가 다시 box에 transition을 주려니 헷갈려서요!

혹시 따로 주신 의도가 있나요?

답변 1

답변을 작성해보세요.

0

1분코딩님의 프로필

1분코딩

지식공유자

21.04.12 20:13

의도적으로 :hover에만 줄 수도 있는데요, 동작이 다르답니다.
:hover에만 주면 마우스를 올렸을 때만 transition이 동작하므로, 마우스를 뺄 때는 transition이 없는 상태라서 부드럽게 애니메이션 처리가 되지 않습니다.
마우스를 올릴 때만 애니메이션 효과를 주고, 마우스를 뺄 때는 애니메이션 효과를 없애고 싶은 경우, 말씀대로 :hover에 해주시면 됩니다~