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

【问题标题】：How to move a div up and down infinitely in CSS3?如何在 CSS3 中无限上下移动 div？
【发布时间】：2016-06-29 15:54:37
【问题描述】：

您好，我正在尝试使用底部而不是顶部来执行上下移动 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 像素它给出的效果“悬停/浮动”的无限循环。

【问题讨论】：

@diogo “因为冲突”是什么意思？你用那个编辑解决了什么冲突？

标签： css css-animations

【解决方案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 是 high performance animations 的首选。

.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>

【讨论】：

不要使用边距或顶部、底部等，因为与使用transform: translate... 相比，它会消耗大量cpu 功率，并且您的动画在某些低端计算机上可能会很慢。

【解决方案2】：

您可能希望将animation-direction: alternate;（或-webkit-animation-direction: alternate）添加到.piece-open-space #emma 的样式规则中。

这应该会给你那种上下浮动的效果。

即你的 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;
}

【讨论】：

【解决方案3】：

使用动画向上/向下：

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); }
}

&lt;div&gt;&amp;#8595;&lt;/div&gt;

【讨论】：

【解决方案4】：

上下：

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% { }
    }

【讨论】：

【解决方案5】：

只需使用animation: up-down 1s infinite alternate;

@keyframes up-down {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(8px);
  }
}

【讨论】：