[英]Moving a div up and then down
我有我的代码,假设它以向上然后向下移动的方式为 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>
使用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>
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.