css3過渡幻燈片到左邊

Question

我正在一個html5 & css3網站，我堅持滑動過渡。 here u can view an example當前當你點擊右箭頭時，它會滑動到右側，我試圖使它滑動到底部，同時返回箭頭應滑動到頂部。從我在「bg」類中看到的代碼：

-moz-transition: left 1.5s ease-in-out; 
-webkit-transition: left 1.5s ease-in-out; 
transition: left 1.5s ease-in-out; 

如果我將其更改爲底部，則會產生奇怪的效果。我知道我錯過了一件很容易的事，有人可以幫我解答。

Answer 1

#test  {    
      -webkit-transition-property: top, bottom; 
      -webkit-transition-duration: 0.5s; 
      } 


#test:hover { 
      top:100px; 
      bottom:100px; 
      } 

測試添加了懸停。你想要移動多少像素。