Html CSS3动画问题

我有一个导航栏，使用css3动画进行滚动。在动画完成之前，它的功能非常强大。有没有办法让它在翻车时保持白色

现场直播：

CSS:

---

将

margintop:-50px

添加到

。菜单项：hover

样式，动画完成后将使用该样式

#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;
}