Создание анимации после анимации зависания

Question

http://codepen.io/DerekDev/pen/PwBadq Если вы наведете над элементом меню эффект зависания, вы заметите, что после того, как анимация hover вернется в исходное состояние после ее окончания (текст вернется туда, где он был). Я хотел бы, чтобы текст оставался там, где он находится, пока вы не отвисаете от меню.

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

использование animation-fill-mode:forwards

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

однако использование :hover не работает, потому что, как только мышь, оно возвращается в предыдущее состояние, которое не содержит: парения CSS. Поэтому лучше использовать javascript для добавления имени класса при наведении мыши, поэтому при выводе мыши он по-прежнему сохраняет мышь над состоянием.

Answer 3

Вы можете использовать 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 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>