Question

您好我正在尝试执行简单的任务，即使用bottom而不是top来上下移动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;
    }
}

更新

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

Answer 1

您可以按如下方式调整关键帧的时间：

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

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>

Answer 3

您可能希望将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;
}

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

Answer 5

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

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

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

5 个答案: