navbar를 만들면서 네비게이션에서 리스트를 마우스 오버하는데
동적인 효과가 없어서 뭔가 가시성이 많이 떨어졌었다 그래서 어떻게 하면 좀 내가 마우스를 이동해서 다른 리스트로 갔는지 보기편하게 애니메이션 효과를 줘봤다. 코드는 위와 같다
.HotItem {
display: flex;
justify-content: center;
position: absolute;
width: 120px;
animation-name: fade;
animation-duration: 0.8s;
animation-iteration-count: 1;animation-name
이 애니메이션의 중간 상태를 지정합니다. 중간 상태는 @keyframes 규칙을 이용하여 기술합니다 fade를 이용하여 숨김animation-duration
animation-duration
한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정합니다.
0.8초를 줬다.animation-iteration-count
애니메이션이 몇 번 반복될지 지정합니다. 1로 지정하여 1번만 실행된다.
.hideMenu {
display: flex;
border: 1px solid #e9e9e9;
width: 150px;
height: 160px;
margin: 0 auto;
z-index: 1;
background-color: white;.menuList {
font-size: 16px;
li {
margin-left: 30px;
padding-top: 30px;
color: black;
}
}
}
}
@keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}애니메이션 효과를 안줬을땐 opacity: 0;으로 보이지 않고
마우스 호버시 opacity: 1;로 화면에 나타나게 만들어준다.
