2013-04-09 234 views
0

我在想,如果有可能倒退我的動畫,情況如下:CSS3動畫關鍵幀

我動畫我的導航使用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 */ 
     } 

現在他用動畫擴展當我將它懸停時,沒有我想知道如何快速回放動畫,甚至在釋放懸停時也能順利進行。

回答

0

你可以使用CSS轉換來做到這一點。

範例CSS

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

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

使得它容易得多,很好的解決方案!謝謝! – FurryKirby 2013-04-09 13:47:40