我如何更改文本动画，以便它们只显示在自己的 space 中？

Question

我正在使用 CSS 添加一些动画到我正在处理的网站。但是 overflow: hidden 属性似乎没有按我预期的方式工作。这是我的代码。

.jumbotron {
    height: 100%;
    height: 100vh;
    align-items: center;
    display: flex;
    position: relative;
}

.sty {
    display: inline-block;
    position: relative;
}

.sty1 {
    position: relative;
    animation: firanim 1.5s ease-in-out;
    overflow: hidden;
}
.sty2 {
    position: relative;
    animation: secanim 1s ease-in-out;
    overflow: hidden;
}

@keyframes firanim {
    from {top:-50px;}
    to {top:0px;}
}
@keyframes secanim {
    from {left:-55vw;}
    to {left:0px;}
}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css" type="text/css">
  <!-- EndCSS -->

    <title>lorem ipsum</title>
  </head>
  <body>
    <nav class="navbar navbar-expand-sm navbar-dark bg-dark text-white sticky-top">
        <a class="navbar-brand" href="#">Under Development</a>
        <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId"
            aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
        <div class="collapse navbar-collapse justify-content-end" id="collapsibleNavId">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Follow</a>
            </li>
          </ul>
        </div>
    </nav>


    
    <div class="jumbotron justify-content-center">
      <div class="text-monospace sty">
        <h1 class="display-3">welcome<span class="text-danger">!</span></h1>
        <div class="sty1">
        <span class="lead">lorem ipsum lorem <span class="text-warning">LOREM IPSUM.</span></span>
        </div>
        <div class="sty2">
        <span class="lead">lorem ipsum lorem ipsum lorem.</span>
        </div>
      </div>
    </div>



<!-- JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<!-- EndJS -->
  </body>
</html>

那么我的代码中是否缺少任何其他 class 或我使用的任何错误？因为我期待带有 .lead class 的 span 元素只显示在他自己的 space 中，而不是像一些文本从某个地方飞过来一样。我希望你能明白我想说的话。

Answer 1

您正在为整个框（.sty1 和 .sty2）制作动画，文本（.lead）不在（.sty1 和 .sty2）之外，这就是为什么它没有被 overflow: hidden[= 隐藏的原因12=]

您需要将（.sty1 和 .sty2）保留在它们的位置并为 .lead 设置动画

试试这个

.jumbotron {
  height: 100%;
  height: 100vh;
  align-items: center;
  display: flex;
  position: relative;
}

.sty {
  display: inline-block;
  position: relative;
}

.sty1 {
  overflow: hidden;
}

.sty2 {
  overflow: hidden;
}

.sty1 .lead {
  position: relative;
  animation: firanim 1.5s ease-in-out;
}

.sty2 .lead {
  position: relative;
  animation: secanim 1s ease-in-out;
}

@keyframes firanim {
  from {
    top: -50px;
  }

  to {
    top: 0px;
  }
}

@keyframes secanim {
  from {
    left: -55vw;
  }

  to {
    left: 0px;
  }
}

Answer 2

你的动画设置在 .leads 容器（.sty1 和 .sty2）上，所以这是它移动的那个，你的 lead 也跟着移动它，要修复它，您可以将它们包装在 div 中，并用 class 将其 overflow 隐藏起来，像这样

我添加了一个animation-container并设置了overflow:hidden，看到更新后的html

.jumbotron {
  height: 100%;
  height: 100vh;
  align-items: center;
  display: flex;
  position: relative;
}

.sty {
  display: inline-block;
  position: relative;
}

.sty1 {
  position: relative;
  animation: firanim 1.5s ease-in-out;
  overflow: hidden;
}

.sty2 {
  position: relative;
  animation: secanim 1s ease-in-out;
  overflow: hidden;
}

.animation-container {
  overflow: hidden;
}

@keyframes firanim {
  from {
    top: -50px;
  }
  to {
    top: 0px;
  }
}

@keyframes secanim {
  from {
    left: -55vw;
  }
  to {
    left: 0px;
  }
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <link rel="stylesheet" href="css/style.css" type="text/css">
  <!-- EndCSS -->

  <title>Anurag Srivastava - Portfolio</title>
</head>

<body>
  <nav class="navbar navbar-expand-sm navbar-dark bg-dark text-white sticky-top">
    <a class="navbar-brand" href="#">Under Development</a>
    <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
    <div class="collapse navbar-collapse justify-content-end" id="collapsibleNavId">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Follow</a>
        </li>
      </ul>
    </div>
  </nav>



  <div class="jumbotron justify-content-center">
    <div class="text-monospace sty">
      <h1 class="display-3">welcome<span class="text-danger">!</span></h1>
      <div class="animation-container">
        <div class="sty1">
          <span class="lead">lorem ipsum lorem <span class="text-warning">LOREM IPSUM.</span></span>
        </div>
      </div>
      <div class="sty2">
        <span class="lead">lorem ipsum lorem ipsum lorem.</span>
      </div>
    </div>
  </div>



  <!-- JS -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  <!-- EndJS -->
</body>

</html>

Answer 3

尝试以下方法HTML：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css" type="text/css">
  <!-- EndCSS -->

    <title>Anurag Srivastava - Portfolio</title>
  </head>
  <body>
    <nav class="navbar navbar-expand-sm navbar-dark bg-dark text-white sticky-top">
        <a class="navbar-brand" href="#">Under Development</a>
        <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId"
            aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
        <div class="collapse navbar-collapse justify-content-end" id="collapsibleNavId">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Follow</a>
            </li>
          </ul>
        </div>
    </nav>


    
    <div class="jumbotron justify-content-center">
      <div class="text-monospace sty">
        <h1 class="display-3">welcome<span class="text-danger">!</span></h1>
        <div class="sty1">
        <span class="lead_1">lorem ipsum lorem <span class="text-warning">LOREM IPSUM.</span></span>
        </div>
        <div class="sty2">
        <span class="lead_2">lorem ipsum lorem ipsum lorem.</span>
        </div>
      </div>
    </div>



<!-- JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<!-- EndJS -->
  </body>
</html>

以及以下CSS

.jumbotron {
    height: 100%;
    height: 100vh;
    align-items: center;
    display: flex;
    position: relative;
}

.sty {
    display: inline-block;
    position: relative;
}

.sty1 {
    overflow: hidden;
}
.lead_1{
  animation: firanim 1.5s ease-in-out;
  position: relative;
}
.lead_2{
  position: relative;
  animation: secanim 1s ease-in-out;
}
.sty2 {
    overflow: hidden;
}

@keyframes firanim {
    from {top:-50px;}
    to {top:0px;}
}
@keyframes secanim {
    from {left:-55vw;}
    to {left:0px;}
}

希望对您有所帮助！ :)

我如何更改文本动画，以便它们只显示在自己的 space 中？

How can I change text animations so that they just show up in their own space?

html

javascript

css

twitter-bootstrap-3

bootstrap-4