css - 如何在CSS3中无限上下移动一个div？

Question

你好，我正在尝试做一个简单的任务，即上下移动一个 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 ”。

Answer 1

您可以按如下方式调整@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>