html - @keyframes无法以预期的方式工作CSS

我出于实践目的对this网站进行了编码。我在代码笔中将背景图像更改为黑色，因为图像在代码笔中不起作用。 Here's a link to my code.我也将代码放在这里，以防您无法查看代码笔：

INDEX.HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="styles.css">
  <link rel="stylesheet" type="text/css" href="reset.css">
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  <title>Coming Soon</title>
</head>
<body>
  <div class="background">
      <h2 class="logo">Logo</h2>
      <div class="dropdownwrapper">
        <h1 class="bigtext">Coming Soon</h1>
      </div>
      <hr class="divider">
      <h4 class="smalltext">35 days left</h4>
  </div>
</body>
</html>

样式

  body {
  background-color: white;
  font-size: 10px;
}

.background {
  animation-name: fadeout;
  animation-duration: .8s;
  background-image: url(Images/forestbridge.jpg);
  background-size: cover;
  background-position: top;
  animation-fill-mode: backwards;
  height: 100vh;
  font-family: "Raleway", sans-serif;
}

.logo {
  color: white;
  font-weight: 100;
  font-size: 1.5rem;
  padding: 1rem 0 0 1rem;
}

.bigtext {
  color: white;
  text-transform: uppercase;
  font-size: 4rem;
  text-align: center;
  padding-bottom: 1rem;
}

.dropdownwrapper {
  animation-name: dropdown;
  animation-duration: .8s;
  animation-fill-mode: forwards;
}

.divider {
  border: none;
  width: 20%;
  height: 1px;
  background-color: lightgrey;
  margin-bottom: 1.5rem;
}

.smalltext {
  color: white;
  font-size: 1.25rem;
  text-align: center;
}


@keyframes fadeout {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes dropdown {
  0% {
    margin-top: 10vh;
  }

  100% {
    margin-top: 40vh;
  }
}

我也有一个reset.css，但这只是标准的Eric Meyer 2.0重置（不过我将其放置在了代码笔中）。我的问题是，当您重新加载我尝试重新编码的W3Schools版本时，文本“ COMING SOON”下降，行和“剩余35天”文本保留在原处。但是，在我的代码中，整个文本块都掉了。当我仅选择其他元素所在的父div时，为什么我网站上的“ COMING SOON”文本本身不会下降？我怎样才能做到只有“ COMING SOON”字样下降？
谢谢，
莱夫

最佳答案

发生这种情况是因为您正在为margin-top文本的COMING SOON设置动画。由于元素位于normal document flow中，因此对边距进行动画处理会给人以下印象，即即使COMING SOON之后的元素也没有动画。要解决此问题，您应该使用transform进行动画处理，该操作可操纵元素的位置in place。检出forked codepen。

另外，如果您希望将整个文本块放在页面中心，请把所有文本都包裹为div并将其绝对放置。我已经forked another codepen演示了这一点。

向下滑动效果在第二个密码笔中显得更为深刻。

关于html - @keyframes无法以预期的方式工作CSS，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52176858/

coming

html - @keyframes无法以预期的方式工作CSS