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