Question

我正在尝试创建一个登录页面，我想要从下面刷入输入的动画。这是代码：

body {
  padding: 0;
  margin: 0;
}

form {
  position: absolute;
  display: block;
  height: 80%;
  width: 100%;
  left: 0;
  top: 20%;
  text-align: center;
  animation: swipein .5s forwards;
}

@keyframes swipein {
  from {
    top: 30%
  }
  to {
    top: 20%
  }
}

<body>
  <div>
    <form>
      <input type="text" placeholder="username"><br>
      <input type="password" placeholder="password">
    </form>
  </div>
</body>

但是在动画结束后，输入会向右移动一点，正如您在this jsfiddle链接中看到的那样。为什么会发生这种情况，我该如何解决？

Answer 1

表单height为80％，起始top为30％。它们一起高于身高，这会在右侧创建一个滚动条。动画结束后，top为20％，滚动条消失。当滚动条消失时，表格向右跳。

如果删除表单的高度，则不会出现高度溢出和滚动条。

body {
  padding: 0;
  margin: 0;
}

form {
  position: absolute;
  display: block;
  width: 100%;
  left: 0;
  top: 20%;
  text-align: center;
  animation: swipein .5s forwards;
}

@keyframes swipein {
  from{top:30%}
  to{top:20%}
}

<body>
  <div>
    <form>
      <input type="text" placeholder="username"><br>
      <input type="password" placeholder="password">
    </form>
  </div>
</body>

Answer 2

更改是由滚动条引起的，您需要将其隐藏以解决问题

将overflow: hidden;添加到正文

body {
  padding: 0;
  margin: 0;
  overflow: hidden;
}

form {
  position: absolute;
  display: block;
  height: 80%;
  width: 100%;
  left: 0;
  top: 20%;
  text-align: center;
  animation: swipein .5s forwards;
}

@keyframes swipein {
  from {
    top: 30%
  }
  to {
    top: 20%
  }
}

<body>
  <div>
    <form>
      <input type="text" placeholder="username"><br>
      <input type="password" placeholder="password">
    </form>
  </div>
</body>

Answer 3

由于top: 30%和height: 80%加起来达到100％的高度。这会导致垂直滚动条占据一些水平空间，但在动画后消失，因此水平跳过。

如果您使用height: 70%，则无法使用滚动条。

＆＃13;

body {
  padding: 0;
  margin: 0;
  height: 100%;
}

form {
  position: absolute;
  display: block;
  height: 70%;
  width: 100%;
  left: 0;
  top: 20%;
  text-align: center;
  animation: swipein .5s ;
}

@keyframes swipein {
  from {
    top: 30%
  }
  to {
    top: 20%
  }
}

＆＃13;

<body>
  <div>
    <form>
      <input type="text" placeholder="username"><br>
      <input type="password" placeholder="password">
    </form>
  </div>
</body>

＆＃13;

在CSS中动画后，对象会稍微改变位置

3 个答案: