css - 悬停时的 CSS3 淡出效果

Question

想要使用 CSS3 过渡进行一个小的移动和淡出效果，但是当我将多个属性应用于-webkit-transition-property它时，它不会像预期的那样工作。

这是我已经完成的：http: //jsfiddle.net/riless/48P7Q/

Answer 1

添加

 transition:all .3s linear;

以及 ID #box 的相关浏览器前缀。

您无法将两个 CSS 属性附加到过渡，但您可以附加属性“all”，这将影响所有 CSS 属性。

这是一个小提琴：

http://jsfiddle.net/MathiasaurusRex/48P7Q/2/

这是完整的 HTML 和 CSS

HTML：

<span id="box">bubble</span>

CSS：

#box{ 
    background-color:rgba(0,0,0,0.7);
    border-radius:3px;
    display:inline-block;
    padding: 20px 15px;
    color: #fff;
    font-family: Arial, sans-serif;
    position: absolute;
    bottom: 16px;
    box-shadow: 0 0 8px 0 #000;
    -webkit-transition:all .3s linear;
    -moz-transition:all .3s linear;
    -o-transition:all .3s linear;
    transition:all .3s linear;
}

#box:hover{
    opacity:0; bottom: 20px;
}

Answer 2

问题出在-webkit-前缀中。

我认为前缀版本已经过时并且与非前缀版本的工作方式不同，所以：

transition: all 0.3s linear;

和

-webkit-transition: all 0.3s linear;

不要给出相同的结果。

这是有效的代码版本：http: //jsfiddle.net/riless/48P7Q/10/