CSS3 애니메이션 문제

Question

CSS3 애니메이션을 사용하여 롤오버가있는이 탐색 모음이 있습니다. 애니메이션이 완료 될 때까지 훌륭한 기능을합니다. 롤오버에서 흰색을 유지할 수있는 방법이 있습니까?

라이브 사이트 : http://daveywhitney.com/nav/3/이

CSS :

#menu{ 
    height : 50px; 
    overflow-y : hidden; 
    float:left; 
    border:5px solid #FAFEFF; 
    -webkit-border-radius: 50px; 
-moz-border-radius: 50px; 
border-radius: 50px; 
} 
.menu-item { 
    height : 100px; 
    width : 100px; 
    cursor : pointer; 
    display : inline-block; 
    animation-name:menu; 
    animation-duration:1s; 
    /* Firefox */ 
    -moz-animation-name:menu; 
    -moz-animation-duration:1s; 
    /* Safari and Chrome */ 
    -webkit-animation-name:menu; 
    -webkit-animation-duration:1s; 
} 
@keyframes menu{ 
to{margin-top:0px;} 
    from {margin-top:-50px;} 
} 

@-moz-keyframes menu/* Firefox */ 
{ 
to{margin-top:0px;} 
    from {margin-top:-50px;} 
} 

@-webkit-keyframes menu/* Safari and Chrome */ 
{ 
to{margin-top:0px;} 
    from {margin-top:-50px;} 
} 
.menu-item:hover{ 
    animation-name:menuhover; 
    animation-duration:.3s; 
    /* Firefox */ 
    -moz-animation-name:menuhover; 
    -moz-animation-duration:.3s; 
    /* Safari and Chrome */ 
    -webkit-animation-name:menuhover; 
    -webkit-animation-duration:.3s; 
} 
@keyframes menuhover{ 
    from {margin-top:0px;} 
    to {margin-top:-50px;} 
} 

@-moz-keyframes menuhover/* Firefox */ 
{ 
from {margin-top:0px;} 
    to {margin-top:-50px;} 
} 
@-webkit-keyframes menuhover/* Safari and Chrome */ 
{ 
from {margin-top:0px;} 
    to {margin-top:-50px;} 
} 
.menu-item .up{ 
    width : 100%; 
    height : 50%; 
    background-color:#147A7F; 

} 
.menu-item .down{ 
    background-color:#fff; 
    width : 100%; 
    height : 50%; 

} 

#nav-text { 
    text-align:center; 
    padding:15px 0 0 0; 
} 

Answer 1

는 .menu-item:hover 스타일에 margin-top: -50px를 추가하고 애니메이션이 완료된 후 그 사용합니다.