CSS3动画恢复

Question

我见过一些类似的问题，但没有真正的答案。当你把鼠标从悬停状态移开时，有没有办法防止弹回来?

这是我的例子…http://jsfiddle.net/vX7CV/8/

如果你取消悬停元素它就会恢复到原来的padding而不是动画

Answer 1

ul {
    background-color:black;
    color:white;
    width: 100px;
    height:100px;
    -webkit-transition: padding 0.2s ease-in-out;
}  
ul:hover {
    padding-bottom: 35px;
}
//OR
ul {
    background-color:black;
    color:white;
    width: 100px;
    height:100px;
    -webkit-transition: padding 0.2s ease-in-out;
}     
ul:hover {
    padding-bottom: 35px;
}

Answer 2

你可以在使用过渡而不是动画(这似乎更相关，因为它是一个悬停事件)之后实现你的目标。我已经分叉了你的例子:http://jsfiddle.net/cherryflavourpez/fxL8U/