为什么不赢得顶级＆＃39;财产动画过渡？

Question

我正试着这样做，以便当你将鼠标悬停在方框上时，'^'将向上动画。目前它处于过度状态的正确位置，但它不适用于css transistion。

jsFiddle：http://jsfiddle.net/9f9fyaj2/

HTML：

<a href="#">
    <div class="scrollToTop">
        <i>^</i>
    </div>
</a>

CSS：

body{
    background: #7A7A7A;
}
.scrollToTop{
    color: rgba(255,255,255,1);
    background: rgba(0,0,0,0.5);
    width: 50px;
    height: 50px;
    position: fixed;
    right: 20px;
    bottom: 20px;
}

.scrollToTop i{
    position: absolute;
    top: 0px;
    -webkit-transition: top .02s ease-out;
    -moz-transition: top .02s ease-out;
    -ms-transition: top .02s ease-out;
    -o-transition: top .02s ease-out;
    transition: top .02s ease-out;
}

.scrollToTop:hover i{
    top:-20px;
}

.scrollToTop:hover{
    background: rgba(0,0,0,1);
}

Answer 1

您的过渡运作良好且良好。 只需增加过渡时间。

喜欢这个：

.scrollToTop i{
            position: absolute;
            top: 0px;
            -webkit-transition: top .5s ease-out;
            -moz-transition: top .5s ease-out;
            -ms-transition: top .5s ease-out;
            -o-transition: top .5s ease-out;
            transition: top .5s ease-out;
}