前端动画的bug：hover一个li，左滑进背景图，li上文字消失太快（或者说出现闪现消失）

要求实现的动效：左边每一条li鼠标经过的时候，蓝色框从左边滑进，右边图片从右边滑进



出现的bug：hover上一个li，文字的变白速度比滑出条速度快，出现一瞬间的闪现效果（或者说完全消失）



蓝色条是从左滑出的，使用的是jq+animate.min.css

$("li").hover(function(){

$(this).find($(".bg--blue")).addClass("animated fadeInLeftBig");

})

但是文字变白的这样的

li.active>a,

li.active>a:hover,

li.active>a:focus{

color:#fff;

}

考虑到，有可能是css上的hover之后发生的时间比jq的hover()的时间快，或者也有原因是animated或者fadeInLeftBig已经加上时间延迟

翻看animate.mim.css的源码





于是我们可以这样做

解决：

li.active>a{

color:#fff;

transition:all 1s;/*这里秒数自己加*/

}

li.active>a:hover,

li.active>a:focus{

color:#fff;

}

效果：可以看出字体的颜色是渐变成白色的而不是没有任何缓冲时间变白色



PS：

CSS3中translate、transform和translation的区别和联系：

http://www.cnblogs.com/mumu-web/p/5706779.html