Question

说明我有一个动画的div，其中红色背景在左侧占据了整个宽度，然后缩小到一半以显示图像，然后文本显示出来。我有一个小问题，我似乎无法解决。在动画的最后，右边的列（红色背景）再次缩小以进行调整，我不希望出现这种情况，不确定在css / sass中的哪个位置会发生这种情况。因此，在移动屏幕上进行调整之前，我会先看到第二张图像。

.masthead-img-left {
  overflow: hidden;
}
.masthead-img-left .text-content-right:before {
  background-color: red;
  -webkit-animation-name: mastHeadanimateTextRight;
  -webkit-animation-duration: 1.5s;
  animation-name: mastHeadanimateTextRight;
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  left: 0;
  z-index: 1;
  transition-property: right, left;
  transition-property: right, left;
  margin: 0 auto;
  display: block;
  transition: all 5s linear;
}
@-webkit-keyframes mastHeadanimateTextRight {
  0% {
    width: -1140px;
    -ms-transform: translateX(-1140px);
    /* IE 9 */
    -webkit-transform: translateX(-1140px);
    /* Safari */
    transform: translateX(-1140px);
  }
  25% {
    width: -1140px;
  }
  50% {
    width: 1140px;
  }
  75% {
    width: -1140px;
  }
  100% {
    width: -555px;
    -ms-transform: translateX(0px);
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
}
.masthead-img-left .text-content-right-texts h1 span {
  color: black;
}
.masthead-img-left .text-content-right-texts h1,
.masthead-img-left .text-content-right-texts p {
  color: white;
  z-index: 2;
  position: relative;
  -webkit-animation: mastHeadAnimateMovingText 3s;
  animation: mastHeadAnimateMovingText 3s;
  transition: all 3s linear;
}
.masthead-img-left .content-right-image {
  -webkit-animation-name: mastHeadanimateImageLeft;
  -webkit-animation-duration: 1s;
  animation-name: mastHeadanimateImageLeft;
  transition: all 1.5s linear;
}
@-webkit-keyframes mastHeadanimateImageLeft {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<html>

<head>
  <title>Products slider</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">


  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
    crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">

  <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
    crossorigin="anonymous"></script>


</head>

<body>

  <div class="container masthead-img-left my-5">
    <div class="row no-gutters d-flex justify-content-center">
      <div class="col-lg-6">
        <img src="https://www.dropbox.com/s/xy33pol9ctj24wt/" alt="iamge goes here" class="content-right-image img-fluid">

      </div>

      <div class="col-lg-6 p-3 text-content-right d-flex justify-content-center align-items-center">
        <div class="text-content-right-texts">
          <h1>H1 title</h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur in quos possimus quaerat ex deserunt
            provident. Quae accusamus explicabo quia aperiam esse. Non ipsum, quidem quisquam alias atque velit
            voluptatem!

          </p>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

Answer 1

我认为该错误的解决方案非常简单。只需更改此内容即可：

对此：

我希望能有所帮助。

Answer 2

尽管我看不到填充，但是您是否尝试过：

p, div { box-sizing:     border-box }

...？

否则我怀疑

margin: 0 auto

占用一些可用空间。

CSS动画错误/问题？

2 个答案: