CSS3動畫 - 完整週期

Question

我剛剛遇到了製作CSS3動畫的問題。

我已經寫了下面的代碼：

@-webkit-keyframes menu_styling_hover 
    from 
    { 
     border-bottom-color:#F5B7B8; 
     padding-top:0px; 
     padding-bottom:0px; 
    } 
    to 
    { 
     border-bottom-color:#FB7A7D; 
     padding-top:6px; 
     padding-bottom:6px; 
    } 
} 

而且我已經把它貼這個關鍵幀與懸停效果股利;

-webkit-animation:menu_styling_hover 0.3s linear; 
animation:menu_styling_hover 0.3s linear; 

它工作正常。但是當我取消這個元素時 - 它變得具有以前的特性而沒有任何隱藏它的動畫。所以當div被徘徊的時候，它有6px的填充，當我從這個div移動鼠標的時候 - 在沒有動畫的情況下，填充成爲0px（5..4..3..2..1）。如何做這樣的事情？

Answer 1

看起來你好像是在CSS transition之後，而不是動畫。

只需設置初始造型，並改變它懸停在元素像這樣的時候：

Example Here

.element { 
    height:40px; 
    border: 2px solid; 
    border-bottom-color:#F5B7B8; 
    padding-top:0px; 
    padding-bottom:0px; 
    transition: all 0.3s linear; 
} 
.element:hover { 
    border-bottom-color:#FB7A7D; 
    padding-top:6px; 
    padding-bottom:6px; 
}