您好,我正在尝试完成一个简单的任务,将div上下移动,以使用底部而不是顶部来提供 float /悬停效果。所以从bottom: 63pxbottom: 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/

10-12 12:24
查看更多