У меня есть эта панель навигации с опрокидыванием с использованием анимации css3.Он прекрасно работает, пока анимация не завершится.Есть ли способ, которым я могу сохранить его белым при наведении курсора?
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;
}