有不同轉換關閉的CSS動畫：懸停

Question

我正在使用CSS動畫，我試圖讓一個div在懸停時跳出（從opacity: 0;更改爲1）。但是，當鼠標懸停我希望它褪色的不透明度恢復到原來的值爲0。到目前爲止，我有：

@-webkit-keyframes bouncey { 
    0% { 
     opacity:0; 
     -webkit-transform: scale(1); 
    } 
    50% { 
     opacity: 1; 
     -webkit-transform: scale(1.1); 
    } 
    100% { 
     -webkit-transform: scale(1); 
    } 
} 

.box { 
    width: 200px; 
    height: 200px; 
    background: red; 
    opacity: 0; 
} 
.box:hover { 
    opacity: 1; 
    -webkit-animation: bouncey 1s ease-in-out; 
} 

http://jsfiddle.net/Xhuuq/

在上空盤旋，這成功地應用於反彈出來的動畫，但我我不確定如何讓div在淡入淡出時回到0。會在某處添加-webkit-transition: opacity 1s;幫助嗎？

我更喜歡只用css /非js/jquery解決方案，如果它甚至可能的話。

Answer 1

http://jsfiddle.net/Xhuuq/7/

.box{ 
    -webkit-transition: opacity 0.5s ease-in-out; 
} 

.box:hover { 
    -webkit-transition: none; 
} 

轉換隻能在模糊發生

希望這有助於:)

Answer 2

你可以讓animation處理彈跳，然後用transition處理不透明度的變化：

http://jsfiddle.net/BYossarian/Xhuuq/9/

@-webkit-keyframes bouncey { 
    0% { 
     -webkit-transform: scale(1); 
    } 
    50% { 
     -webkit-transform: scale(1.1); 
    } 
    100% { 
     -webkit-transform: scale(1); 
    } 
} 

.box { 
    width: 200px; 
    height: 200px; 
    background: red; 
    opacity: 0; 
    -webkit-transition: opacity 0.5s linear; 
} 
.box:hover { 
    opacity: 1; 
    -webkit-animation: bouncey 1s ease-in-out; 
}