離開懸停後完成CSS動畫

Question

我有一個酒吧，徘徊時從藍色垂直翻轉到灰色。離開懸停時，它會回到藍色。大。

問題
，只負責動畫長不過你在它懸停狀態。如果你徘徊和「解除」真的很快，它不會完成動畫。

目標
我希望它從藍色翻轉到灰色和回藍，即使盤旋了一秒鐘。我不想讓動畫立即停止。

ATTEMPTS
我讀過，這不能用純CSS完成。

我試着加入以下的jQuery代碼，增加了從這個問題中刪除一個動畫類：css3 animation on :hover; force entire animation：

$(".bar").bind("transitionend webkitTransitionEnd oTransitionEnd", function(){ 
$(this).removeClass("vFlipper") 
}) 
$(".bar").hover(function(){ 
$(this).addClass("vFlipper"); 
}) 

和更改.vFlipper的CSS來.bar.vFlipper，但我似乎無法到讓它與我的代碼一起工作。 UL和LI似乎總是會引起我的問​​題。我理解它如何與DIV一起工作，但與列表無關。

FIDDLE
http://jsfiddle.net/zuhloobie/t9x723tq/1/

任何幫助，將不勝感激:)

## UPDATE ##
我真的很接近這個小提琴：http://jsfiddle.net/zuhloobie/t9x723tq/8/

這是越野車，雖然。當您從左側輸入li時，它將翻轉爲灰色，但退出時不會翻轉回藍色。當您從頂部，右側或底部輸入li時，它在懸停時不會翻轉爲灰色，但會在您退出時執行整個動畫。想法？

Answer 1

你應該試試這種類型代碼/語法

 
$(document).ready(function(){ 
    $('#bar').bind("click transitionend webkitTransitionEnd oTransitionEnd", function() { 
// css for doing flipping will go here; 
// alert("User clicked on bar"); 

}); 

$('#bar').bind("click transitionend webkitTransitionEnd oTransitionEnd", function() { 
// css for returning/reversing flipper will go here; 
// alert("User clicked on bar"); 

}); 

});