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

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

＆＃13;

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

＆＃13;

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

＆＃13;

在悬停动画后制作动画

4 个答案: