CSS3对悬停的衰减效应

想要使用CSS3转换实现一个小的移动和淡出效果，但是当我将多个属性应用于

-webkit转换属性时，它的工作方式与假设的不一样

以下是我已经完成的工作：
添加

 transition:all .3s linear;

以及id#框的相关浏览器前缀

您不能将两个CSS属性附加到转换，但可以附加属性“all”，这将影响所有CSS属性

这是一把小提琴：


下面是完整的HTML和CSS

HTML:

问题出在
-webkit-
前缀中

我认为带前缀的版本已经过时，与不带前缀的版本不一样，因此：

transition: all 0.3s linear;

及

不要给出相同的结果

下面是代码的版本：
Odd，在Firefox中效果很好，但在Chrome中行为怪异。在Chrome中仍然有同样的怪异行为！我放慢了过渡时间，这似乎对我起了作用：你不在chrome上？我使用的chrome版本30.0.1599.101在firefox 2上运行良好，但在Ubuntu下的chrome 29.0.1547.65上运行不好
#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;
}

transition: all 0.3s linear;

-webkit-transition: all 0.3s linear;