您好,我正在尝试完成一个简单的任务,将div上下移动,以使用底部而不是顶部来提供 float /悬停效果。所以从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,这给出了一个无限循环的效果“悬停/ float ”。
最佳答案
您可以按以下方式调整@keyframes
的时间:
.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>
编辑
如以下注释中所指出的,high performance animations首选使用
transform
。.object {
animation: MoveUpDown 1s linear infinite;
position: absolute;
left: 0;
bottom: 0;
}
@keyframes MoveUpDown {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-100px);
}
}
<div class="object">
hello world!
</div>
关于html - 如何在CSS3中无限上下移动div?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35990445/