爲什麼'頂部'屬性不能生成transistion？

Question

我試圖獲得它，這樣當你將鼠標懸停在框上時，'^'將向上移動。目前它在over狀態上處於正確的位置，但它不適用於css轉換。

的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; 
}