css - 具有不同过渡的 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

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

Answer 2

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

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

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

过渡只发生在模糊

希望这可以帮助 ：）