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在mouseleave上淡出为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;
}

仅在模糊时发生转换

希望这有助于：）

不同过渡关闭的CSS动画：悬停

2 个答案: