具有不同过渡的 CSS 动画关闭 :hover

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

您可以让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;
}