Question

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

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

Answer 1

添加

 transition:all .3s linear;

和相关的浏览器前缀到id #box。

您无法将两个CSS属性附加到转换，但您可以附加将影响所有css属性的属性“all”。

这是一个小提琴：

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/

CSS3淡出效果对悬停

2 个答案: