Reputation: 1324
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;
}
Upvotes: 2
Views: 378
Reputation: 11535
Add margin-top: -50px
to the .menu-item:hover
style, and it will use that after the animation finishes.
Upvotes: 1