如何在 CSS3 中无限上下移动 div？

Question

您好，我正在尝试做一个简单的任务，即上下移动 div 以使用底部而不是顶部来提供浮动/悬停效果。所以从 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;
    }
}

更新

问题是它不会循环是我正在寻找的目标它达到 400 像素然后立即回到 63 像素我将如何让它达到 400 像素然后又回到 63 像素它给出了无限循环的效果“悬停/浮动”。

原文由 user3112634 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

编辑

正如下面评论中指出的那样，使用 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>

原文由 Stickers 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

向上/向下 动画：

 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>&#8595;</div>

原文由 sree 发布，翻译遵循 CC BY-SA 4.0 许可协议