Inflearn コミュニティ Q&A
投稿した質問数
안녕하세요 아래질문과 같은현상이 있었습니다.
作成
·
258
0
저도 같은 현상이 있었습니다! 먼저 애니매이션이 적용되고 기준점이 옮겨졌습니다.
.box {
width: 100px;
height: 100px;
border: 2px solid black;
background: rgba(255, 255, 0, 0.7);
transition: 1s;
}
.box:hover{
transform-origin: left top;
transform: scale(2) rotate(15deg);
HTML/CSSjavascript인터랙티브-웹
回答 2
0
studiomeal
インストラクター
transform-origin을
.box:hover {} 에 넣는 대신 .box {}에 넣어주세요~
:hover는 마우스를 올렸을 때만 적용되는 것이라서
마우스를 빼면 효과도 사라져서 예상과 다른 동작이 될 수 있습니다.
특정 속성에만 transition을 적용하려면
transition: width 0.5s;
이런 식으로 해당 속성을 명시해주시면 됩니다.
0
lolcv1475
質問者
그리고 마우스 호버시에 속성 변환에 트랜지션을 줄때, 한가지 속성 (예로들면 width와 컬러 두가지 속성이 있다면)에만 트랜지션을 주려면 어떻게 해야하나요?