css3 实现 透明度渐变

我好像是发现了新大陆，哈哈。。。
想做透明度渐变效果，网上没找见合适的，由第一个Demo 的 -webkit-transition: width 2s 想到了把width 换成 opacity ，结果就实现了
只用css3 也可以实现

第一个Demo

### css3：
.floating-word{
            width: 200px;
            opacity: 0;
}
.ani{
            border: 1px solid salmon;
            transition:width 2s;
            -webkit-transition: width 2s;
            white-space: nowrap; /*不换行*/
            overflow: hidden;
            text-overflow: ellipsis; /*超出部分以省略号代替*/
            background: transparent;
            color: black;
}

### html：
<div class="floating-word">
            <span>找找登录界面在，移动鼠标即可</span>
</div>

### js：

$(function(){
    $(".floating-word").mouseover(function(){
        $('.floating-word').addClass("ani");
        $(".floating-word").css("width",'300');
    })
})

最终需求效果

### css
.floating-word{
            width: 200px;
            opacity: 0;
        }
        .ani{
            transition:width 2s;
            -webkit-transition: opacity 5s;
        }


### html:
<div class="floating-word">
            <!--<span>谨以此送给你，恒日考虑</span>-->
            <span>找找登录界面在，移动鼠标即可</span>
        </div>


### js:
$(function(){
                $(".floating-word").mouseover(function(){
                    $('.floating-word').addClass("ani");
                    $(".floating-word").css("width",'300');
                    $('.floating-word').css('opacity','1');
                })
            })

若只用css，加上以下内容

.floating-word:hover{
            opacity: 1;
        } 

缺点： 鼠标离开上方就消失了