-
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
질문!
21.04.12 17:23 작성 조회수 162
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을 주려니 헷갈려서요!
혹시 따로 주신 의도가 있나요?
답변을 작성해보세요.
0
1분코딩
지식공유자2021.04.12
의도적으로 :hover에만 줄 수도 있는데요, 동작이 다르답니다.
:hover에만 주면 마우스를 올렸을 때만 transition이 동작하므로, 마우스를 뺄 때는 transition이 없는 상태라서 부드럽게 애니메이션 처리가 되지 않습니다.
마우스를 올릴 때만 애니메이션 효과를 주고, 마우스를 뺄 때는 애니메이션 효과를 없애고 싶은 경우, 말씀대로 :hover에 해주시면 됩니다~
답변 1