如何在CSS3中無限移動div？

Question

你好，我正在嘗試做一個簡單的任務：上下移動一個div，使用bottom而不是top來實現浮動/懸停效果。所以從bottom: 63px到bottom: 400px。

我是新來的CSS和關鍵幀！正如你可能知道，但這裏是我曾嘗試，它似乎並沒有做任何事情：

.piece-open-space #emma { 
    background-image: url('images/perso/Emma.png?1418918581'); 
    width: 244px; 
    height: 299px; 
    position: absolute; 
    display: block; 
    width: 244px; 
    background-image: none; 
    position: absolute; 
    left: 2149px; 
    bottom: 63px; 
    -webkit-animation: MoveUpDown 50s linear infinite; 
} 

@-webkit-keyframes MoveUpDown { 
    from { 
     bottom: 63px; 
    } 
    to { 
     bottom: 400px; 
    } 
} 

更新

問題是，它不會循環使用是我的目標尋找它獲得400px然後立即回到63px我怎麼會讓它達到400px，然後回落到63px它給無限循環的「懸停/浮動」的效果。

Answer 1

嘗試此操作，並根據需要調整值。

.test { 
 
    animation: MoveUpDown 1s linear infinite; 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
} 
 

 
@keyframes MoveUpDown { 
 
    0% { 
 
    bottom: 0; 
 
    } 
 
    50% { 
 
    bottom: 100px; 
 
    } 
 
    100% { 
 
    bottom: 0; 
 
    } 
 
}

<div class="test"> 
 
    test 
 
</div>

Answer 2

你可能會想添加animation-direction: alternate;（或-webkit-animation-direction: alternate）到您的樣式規則上.piece-open-space #emma。

這應該會給你那種浮起來的效果。

I.e.你的CSS應該看起來像：

.piece-open-space #emma { 
    background-image: url('images/perso/Emma.png?1418918581'); 
    width: 244px; 
    height: 299px; 
    display: block; 
    background-image: none; 
    position: absolute; 
    left: 2149px; 
    bottom: 63px; 
    -webkit-animation: MoveUpDown 50s linear infinite; 
    -webkit-animation-direction: alternate; 
}