有不同转换关闭的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; 
}