CSS3 анимации Keyframes

Question

мне было интересно, если это возможно, чтобы перемотать мои анимации, дело выглядит следующим образом:

я оживляющий мой СЧ с CSS3 ключевыми кадрами:

 @-webkit-keyframes nav /* Safari and Chrome */ 
     { 
      0% {width: 0%; opacity:0.0;} 
     100% {width: 22%; opacity:0.5;} 
     } 

     nav:hover 
     { 
      animation: nav 3s; 
      -moz-animation: nav 3s; /* Firefox */ 
      -webkit-animation: nav 3s; /* Safari and Chrome */ 
      -o-animation: nav 3s; /* Opera */ 
     } 

Теперь он расширяется с анимацией когда я нахожу его, нет, мне интересно, как перематывать анимацию даже плавно, когда я отпускаю зависание.

Answer 1

Вы можете использовать переход CSS для этого.

Пример CSS

nav 
{ 
    width: 0%; 
    opacity: 0; 
    transition:all 3s ease-in-out;  
} 

nav:hover 
{ 
    width: 22%; 
    opacity:0.5;  
}