代码之家 › 专栏 › 技术社区 › jsPlayer

CSS动画错误/问题?

css-animations bootstrap-4 animation css html

jsPlayer · 技术社区 · 6 年前

描述我有一个动画分区,红色背景在左侧占全宽,然后缩小到一半以显示图像,然后显示文本。我有一个小问题似乎解决不了。在动画的最后,右栏(红色背景)再次缩小以进行调整,我不希望出现这种行为,不确定在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>

2 回复 | 直到 6 年前

Maciej Bledkowski 6 年前

我认为这个bug的解决方案非常简单。只需更改:

<DIV class=“集装箱刊头img left my-5”>

对此:

<div class=“container masthhead img left my-5”style=“padding:0px;”>

希望我能帮忙。

Leo Gabe Sechan 6 年前

虽然我看不到填充物,但您是否尝试过:

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

……?

否则我怀疑

margin: 0 auto

占用一些可用空间。