2

我正在使用 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 的解决方案。

4

2 回答 2

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;
}
于 2013-10-06T22:13:33.317 回答
1

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

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

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

过渡只发生在模糊

希望这可以帮助 :)

于 2013-10-06T22:07:54.357 回答