CSS3 动画快退答案

【问题标题】：CSS3 Animation Snap BackCSS3 动画快退
【发布时间】：2016-11-23 08:22:15
【问题描述】：

我看到了一些与我类似的问题，但没有真正的答案。有没有办法防止鼠标悬停后突然回弹？

如果您从元素上取消悬停，它只会快速恢复到原来的填充而不是动画

【问题讨论】：

【解决方案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;
}

【讨论】：

【解决方案2】：

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

【讨论】：

哦，太好了！我必须承认我对动画、过渡和变换之间的差异感到困惑。
嘿，感谢您的帮助，但您知道如何淡入渐变吗？例如jsfiddle.net/SparrwHawk/fxL8U/1 - 渐变只是一种“弹出”。
不幸的是，你不能（我认为我说的对，CSS 渐变目前还不能动画/过渡，尽管它在规范中）。不过，您可以使用以下方式伪造它：thebigreason.com/blog/2011/01/13/… 或此：useragentman.com/blog/csssandpaper-a-css3-javascript-library