css3簡單的動畫，當它懸停在元素上時，它不會生成動畫，只會快速返回。如何讓它順利回到動畫？

Question

http://jsfiddle.net/nicktheandroid/vX7CV/10/

這是一個簡單的例子，但對於我所需要的，轉換不起作用，需要使用動畫。

當將鼠標懸停在元素上時，動畫可以平滑地爲元素製作動畫，如果將鼠標懸停在元素上，則會將其捕捉回原始設置，而無需平滑地進行背景動畫。

有沒有辦法讓它動畫回到它的設置而不是像它那樣回彈？

Animate需要用於：懸停事件，但是當將鼠標懸停在元素上時，我可以使用轉換，如果這可行，我不能讓它工作。

Answer 1

我已經在谷歌瀏覽器中測試過你的版本，它對我來說工作得很好。 也添加在Firefox的兼容性，這也適用於我。

這是我現在有：

HTML：

<ul> 
    </li>test</li> 
</ul> 

CSS：

ul { 
    background-color:black; 
    color:white; 
    width: 100px; 
    height:100px; 
} 
@-moz-keyframes flow-down { 
    0% { 
     padding-bottom: 0%; 
    } 
    100% { 
     padding-bottom: 30%; 
    } 
} 
@-webkit-keyframes flow-down { 
    0% { 
     padding-bottom: 0%; 
    } 
    100% { 
     padding-bottom: 30%; 
    } 
} 
ul:hover { 
    -moz-animation-name: flow-down; 
    -moz-animation-duration: 0.5s; 
    -moz-animation-timing-function: ease-in-out; 
    -moz-animation-fill-mode:forwards; 
    -webkit-animation-name: flow-down; 
    -webkit-animation-duration: 0.5s; 
    -webkit-animation-timing-function: ease-in-out; 
    -webkit-animation-fill-mode:forwards; 
} 

這裏是的jsfiddle版本只是櫃面：

http://jsfiddle.net/NQ5xk/1/

希望這有助於。

問候

Answer 2

在Firefox中，如果有變化 '位置' 或 'z-index的' ATTR在動畫，動畫將無法運行