向上然后向下移動 div

Question

我有我的代碼，假設它以向上然后向下移動的方式為 div 設置動畫。 但它不起作用，我不知道為什么。

 document.getElementById('div').style = 'width: 50px; height: 50px; background-color: blue; left: 10px; bottom: 10px; position: absolute; animation-name: up; animation-duration: 2s;'; setTimeout(function() { document.getElementById('div').style = 'width: 50px; height: 50px; background-color: blue; left: 10px; bottom: 10px; position: absolute; animation-name: down; animation-duration: 2s;' }, 2 * 1000); setTimeout(function() { document.getElementById('div').style = 'width: 50px; height: 50px; background-color: blue; left: 10px; bottom: 10px; position: absolute;' }, 2 * 1000);

 @keyframes up { from (bottom: 10); to (bottom: 50); } @keyframes down { from (bottom: 50); to (bottom: 10); }

 <div id="div"></div>

Answer 1

使用translateY屬性，您可以向上或向下移動 html 元素。 只需在 css 動畫中使用它就可以了：

@keyframes upToDown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
  100% {
    transform: translateY(0);
  }
}

這里有完整的例子：

 div { background: red; margin-top: 50px; animation: upToDown 2s infinite; } @keyframes upToDown { 0% { transform: translateY(0); } 50% { transform: translateY(-30px); } 100% { transform: translateY(0); } }

 <div> a div </div>

Answer 2

css就夠了！

 @keyframes upAndDown { 0% { bottom: 5px; } 100% { bottom: 10px; } } .wrapper { position: relative; width: 100px; height: 100px; border: 1px solid black; } .content { position: absolute; bottom: 5px; width: 20px; height: 20px; background-color: red; animation: upAndDown 1s ease-in-out 2s infinite; }

 <div class="wrapper"> <div class="content"></div> </div>