CSS3動畫關鍵幀

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;  
}