css hover 시 transition 시간

Question

안녕하세요hover 시 transform 작동시간을 transition으로 조절할 수 있잖아요.만약 hover 시 box가 뒤집히고 transition을 1초로 줬다고 예를 들어볼게요.처음 hover 하면 박스가 1초에 걸쳐서 뒤집히긴 하는데, 마우스를 떼면 순식간에 원상태로 돌아가요. 원래는 돌아가는것도 1초에 걸쳐서 돌아가야하잖아요. html css .newsroom_btn1 span { position: relative; z-index: 2; } .newsroom_btn1::before { position: absolute; content: ''; width: 150%; height: 150%; background-color: white; top: 100%; left: -25%; z-index: 1; border-radius: 50%; } .newsroom_btn1:hover::before { transition: 0.7s; top: -25%; } .newsroom_btn1:hover{ color: #1428A0; transition: 0.7s; }이건 제가 작성한 html하고 css입니다.버튼에 마우스를 hover하면 before가 올라오면서 버튼을 흰색으로 채우는 거예요.이것도 마찬가지로 마우스를 떼면 바로 원상복귀가 됩니다. 0.7초에 걸쳐서 돌아오는게 아니구요. 왜 그런건가요?

frostyDog · Answer

왜냐하면 나오는것에는 transition이 걸려있지만원래것에는 transition가 없어서 그래요

EmDev · Answer

hover 상태에만 transition이 정의되어 있고, hover 상태가 아닌 경우엔 transition이 정의되어 있지 않아서요 ㅎㅎ

AlineFanClub · Answer

호버상태와 아닐시 둘다 적용하고 싶으시면 간단하게 .newsroom_btn1 에만 트렌지션 속성 넣으시면 됩니다.그러면 이벤트에 따라서 트랜지션 적용 둘다 될거에요

css hover 시 transition 시간

3개의 답변

Q&A 목록