Making animation stay after hover animation

Question

http://codepen.io/DerekDev/pen/PwBadq If you hover over a menu item on hover effect, you'll notice that after the hover animation returns to its original state after it's over (the text goes back to where it was). I would like the text to stay where it is until you un-hover from the menu.

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

You'll likely have to implement a jQuery solution. See below...

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

Answer 2

use animation-fill-mode:forwards

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

however using :hover doesn't work because once the mouse out, it returns to the previous state which doesn't contains :hover css. So it's better to use javascript to add a class name when mouse over, so when mouse out, it still retains the mouse over state.

Answer 3

You can use 2 animations, one lasting 3 seconds, the other 9999 seconds . It won't last forever, but almost ...

.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 4

you may set different transition timing on both states:

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>