Question

I have this navigation bar with a rollover using css3 animation. It functions great until the animation completes. Is there a way I can keep it white on rollover?

Live Site: 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

Add margin-top: -50px to the .menu-item:hover style, and it will use that after the animation finishes.