Html 如何在CSS3中无限上下移动div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35990445/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to move a div up and down infinitely in CSS3?
提问by user3112634
Hello I am trying to do the simple task of moving a div up and down to give a floating/hovering effect using bottom instead of top. So from bottom: 63pxto bottom: 400px.
您好，我正在尝试使用底部而不是顶部来执行上下移动 div 以提供浮动/悬停效果的简单任务。所以从bottom: 63px到bottom: 400px.
I am new to CSS and keyframes! As you can probably tell But here is what I have tried and it didn't seem to do anything:
我是 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;
}
}
Update
更新
The problem is it won't loop with is the goal I am looking for it gets to 400px then instantly goes back to 63px how would i make it get to 400px and then go back down to 63px it give the effect of an endless loop of "hovering/floating".
问题是它不会循环是我正在寻找的目标是它达到 400 像素然后立即回到 63 像素我如何使它达到 400 像素然后回到 63 像素它给出了无限循环的效果“悬停/浮动”。
回答by Stickers
You can adjust the timing of the keyframes as follows:
您可以按如下方式调整关键帧的时间：
.object {
animation: MoveUpDown 1s linear infinite;
position: absolute;
left: 0;
bottom: 0;
}
@keyframes MoveUpDown {
0%, 100% {
bottom: 0;
}
50% {
bottom: 100px;
}
}<div class="object">
hello world!
</div>回答by srijishks
Up/Down with animation
向上/向下动画
div {
-webkit-animation: action 1s infinite alternate;
animation: action 1s infinite alternate;
}
@-webkit-keyframes action {
0% { transform: translateY(0); }
100% { transform: translateY(-10px); }
}
@keyframes action {
0% { transform: translateY(0); }
100% { transform: translateY(-10px); }
}<div>↓</div>回答by Idan
Up and Down:
上和下：
div {
-webkit-animation: upNdown 2s infinite linear;
animation: upNdown 2s infinite linear;
}
@-webkit-keyframes upNdown {
0% { }
50% { transform: translate(-5px); }
100% { }
}
@keyframes upNdown {
0% { }
50% { transform: translate(-5px); }
100% { }
}
回答by burnedikt
You'll probably want to add animation-direction: alternate;(or -webkit-animation-direction: alternate) to your style rules on .piece-open-space #emma.
您可能希望将animation-direction: alternate;（或-webkit-animation-direction: alternate）添加到.piece-open-space #emma.
That should give you that floating-up-and-down-effect.
那应该会给你那种上下浮动的效果。
I.e. your css should look like:
即你的 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;
}
