特定 div 的 CSS 动画

Question

我在互联网上的文章的帮助下做了一些 css 动画。然而，当我把这个动画，它遍及全身。但我只在 Container-fluid div 中需要它。 我该如何控制这个？ 我试过溢出：隐藏，但它不起作用。 代码如下。 （我在这里放了一个具体的身体尺寸，让你理解。当我把它放在我的网站上时，它就全部结束了。

body {
  width: 1366px;
  height: 1366px;
}

.anim_Main {}

.bg {
  animation: slide 5s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, #fed900 50%, #D71920 50%);
  bottom: 0;
  left: -50%;
  opacity: .5;
  position: fixed;
  right: -50%;
  top: 0;
  z-index: -1;
}

.bg2 {
  animation-direction: alternate-reverse;
  animation-duration: 6s;
}

.bg3 {
  animation-duration: 7s;
}

.content {
  background-color: rgba(255, 255, 255, .8);
  border-radius: .25em;
  box-shadow: 0 0 0.25em rgba(0, 0, 0, .25);
  box-sizing: border-box;
  /* left: 50%; */
  /* padding: 10vmin; */
  position: relative;
  float: left;
  text-align: center;
  /* top: 50%; */
  /* transform: translate(-50%, -50%);*/
}

.contentNews {
  background-color: rgba(255, 255, 255, .8);
  border-radius: .25em;
  box-shadow: 0 0 0.25em rgba(0, 0, 0, .25);
  box-sizing: border-box;
  position: relative;
  float: left;
  text-align: center;
  width: 100%;
}

@keyframes slide {
  0% {
    transform: translateX(-25%);
  }
  100% {
    transform: translateX(25%);
  }
}

.widthMax {
  width: 100%;
}

<div class="container-fluid">
  <div class="content">
    <div class="row">
      <div class="widthMax">
        <h2>Lorem Ipsum</h2>
      </div>

      <div class="col-sm-5">
        <div class="purifier">
          <div class="bg"></div>
          <div class="bg bg2"></div>
          <div class="bg bg3"></div>
        </div>
        <h3 class="card-title" align="center">Lorem Ipsum..!</h3>
        <p class="drop-cap">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
          survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
          publishing software like Aldus PageMaker including versions of Lorem Ipsum. &rdquo;
      </div>

      <div class="col-sm-7">
        <a href="#" target="_blank"><img class="img-fluid" src=""></a>
        <br /><br />
        <a href="#" class="card-link" target="_blank">
          <h5 align="center">Lorem Ipsum</h5>
          <p align="center"><i class="fa fa-info-circle"></i> <i>Lorem Ipsum</i>
        </a>
      </div>

    </div>
  </div>

</div>

Answer 1

将.content设置为非静态定位元素的上下文，并隐藏溢出：

.content {
  position: relative; /* already exists */
  overflow: hidden;

.bg的position是fixed，改成absolute，这样就在.content的上下文中了。

.bg {
  position: absolute;

.container-fluid { 
  width: 50vw; /* just for the demo */
}

.bg {
  position: absolute;
  animation: slide 5s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, #fed900 50%, #D71920 50%);
  bottom: 0;
  left: -50%;
  opacity: .5;
  right: -50%;
  top: 0;
  z-index: -1;
}

.bg2 {
  animation-direction: alternate-reverse;
  animation-duration: 6s;
}

.bg3 {
  animation-duration: 7s;
}

.content {
  overflow: hidden;
  background-color: rgba(255, 255, 255, .8);
  border-radius: .25em;
  box-shadow: 0 0 0.25em rgba(0, 0, 0, .25);
  box-sizing: border-box;
  /* left: 50%; */
  /* padding: 10vmin; */
  position: relative;
  float: left;
  text-align: center;
  /* top: 50%; */
  /* transform: translate(-50%, -50%);*/
}

.contentNews {
  background-color: rgba(255, 255, 255, .8);
  border-radius: .25em;
  box-shadow: 0 0 0.25em rgba(0, 0, 0, .25);
  box-sizing: border-box;
  position: relative;
  float: left;
  text-align: center;
  width: 100%;
}

@keyframes slide {
  0% {
    transform: translateX(-25%);
  }
  100% {
    transform: translateX(25%);
  }
}

.widthMax {
  width: 100%;
}

<div class="container-fluid">
  <div class="content">
    <div class="row">
      <div class="widthMax">
        <h2>Lorem Ipsum</h2>
      </div>

      <div class="col-sm-5">
        <div class="purifier">
          <div class="bg"></div>
          <div class="bg bg2"></div>
          <div class="bg bg3"></div>
        </div>
        <h3 class="card-title" align="center">Lorem Ipsum..!</h3>
        <p class="drop-cap">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
          survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
          publishing software like Aldus PageMaker including versions of Lorem Ipsum. &rdquo;
      </div>

      <div class="col-sm-7">
        <a href="#" target="_blank"><img class="img-fluid" src=""></a>
        <br /><br />
        <a href="#" class="card-link" target="_blank">
          <h5 align="center">Lorem Ipsum</h5>
          <p align="center"><i class="fa fa-info-circle"></i> <i>Lorem Ipsum</i>
        </a>
      </div>

    </div>
  </div>

</div>