悬停动画后使动画保持不变

Question

http://codepen.io/DerekDev/pen/PwBadq 如果您将鼠标悬停在悬停效果的菜单项上，您会注意到在悬停动画结束后返回其原始状态（文本回到原来的位置）。我希望文本保持原位，直到您从菜单中取消悬停。

CSS：

.menu a {
  color:#505050;
  position:relative;
  text-decoration:none;
  margin-left:5px;
  margin-right:5px;
  transition:1s;
  padding-left:20px;
  padding-right:20px;
    padding-top:26px;
  padding-bottom:25px;
  transition:1s;
}
@-webkit-keyframes menu {
  from {top:0;}
  to {top:10px;}
}
.menu a:hover {
  background-color:#e03333;
  color:#ffffff;
  -webkit-animation-name:menu;
  -webkit-animation-duration:300ms;
  -webkit-animation-iteration-count:1;
}

Answer 1

您可能必须实现一个 jQuery 解决方案。见下文...

$(document).ready(function(){
    $('.menu').on('mouseenter',function(){
        $(this).animate({'backgroundColor':'#e03333',
            'color':'#ffffff'},200,'linear');
    });
});

Answer 2

您可以使用 2 个动画，一个持续 3 秒，另一个持续 9999 秒。它不会永远持续下去，但几乎......

.menu a {
  color:#505050;
  position:relative;
  text-decoration:none;
  margin-left:5px;
  margin-right:5px;
  transition:1s;
  padding-left:20px;
  padding-right:20px;
    padding-top:26px;
  padding-bottom:25px;
  transition:1s;
}
@-webkit-keyframes menu {
  0% {top:0;}
  10%, 100% {top:10px;}
}
@-webkit-keyframes menu2 {
    0% {top:10px;}
  100% {top:10px;}
}

.menu a:hover {
  background-color:#e03333;
  color:#ffffff;
  -webkit-animation-name:menu, menu2;
  -webkit-animation-duration:3s, 9999s;
  -webkit-animation-delay: 0s, 1s;
  -webkit-animation-iteration-count:1;
}

<div class=menu><a>test</a></div>

Answer 3

使用animation-fill-mode:forwards

-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation-fill-mode: forwards;

但是使用:hover 不起作用，因为一旦鼠标移出，它就会返回到不包含 :hover css 的先前状态。所以鼠标悬停时最好使用javascript添加类名，这样当鼠标移出时，它仍然保留鼠标悬停状态。

Answer 4

您可以为两种状态设置不同的转换时间：

a {
  transition:1.5s;
  }
a:hover {
  background:tomato;
  transition:0.3s
    }

<nav><a href="#nowhere">no where</a> <a href="#nowhere">nowhere</a> <a href="#nowhere">now here</a></nav>