Question

我试图做一个简单的任务，就是使用底部而不是顶部来上下移动div以产生浮动/悬停效果。

我是CSS和关键帧的新手！你可能会说。但这是我尝试过的，它似乎没有做任何事情：

＆＃13;

.Mail {
  margin-top: -77px;
  margin-left: 791px;
  animation: MoveUpDown 1s linear infinite;
}

@keyframes MoveUpDown {
  0%, 100% {
    bottom: 0;
  }
  50% {
    bottom: 20px;
  }
}

＆＃13;

<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet">

<i class="Mail fas fa-envelope"></i>

＆＃13;

Answer 1

您需要将position设置为absolute才能使bottom 属性生效：

.Mail {
  margin-top: -77px;
  margin-left: 791px;
  position: absolute;
  bottom: 0;
  animation: MoveUpDown 1s linear infinite;
}

@keyframes MoveUpDown {
  50% {bottom: 20px}
}

<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet">

<i class="Mail fas fa-envelope"></i>

Answer 2

topic-5, topic-1, topic-3 and topic-2，bottom，top，right需要left属性。默认position值为position，其无影响为MDN Explained here。我强烈建议您阅读static指南，了解其效果与bottom值的不同！

无论如何，您的position代码是正确的。但是，您需要了解animation属性如何在CSS中工作以避免类似的错误。

P.S：首先要了解以下内容： position relative absolute，这是来自MDN Web Docs about Positioning

的优质资源

Answer 3

对于正在寻找同一事物的其他人，这是使用transform: translateY();的简单答案：

.moving-div{
margin-top:100px;
    animation-name: move;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes move {
    0% {
        transform: translateY(25%);
    }

    100% {
        transform: translateY(-25%);
    }
}

<div class="moving-div">
I am moving up and down
</div>

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

3 个答案: