CSS动画“转换”问题答案

【问题标题】：CSS animation 'transform' issueCSS动画“转换”问题
【发布时间】：2021-11-08 01:17:28
【问题描述】：

我遇到了一个我自己似乎无法解决的问题。我正在尝试使用“转换”功能漂移三个 div（从左到右 2 个和从右到左 1 个）。基本上我想创建 3 个从页面外部飘入的“盒子”，然后在某个点停止。该功能有效，但是当我在第三个 div 从右侧滑入时添加第三个 div 时，会出现一个扩展的底部滚动条。为什么我得到那个滚动条？如果我检查页面，则有一个不应存在的边距边框，但我的正文边距设置为 0。这也仅在我添加第三个 div 时发生。这让我很困惑。如果您可以检查一下并告诉我这里出了什么问题，那就太好了。我猜是div3的问题？此外，这是正确的方法还是就使用的功能（转换）而言是否有“更好”的方法。提前致谢。

代码如下：

body {
  margin: 0;
}


.introbox-one {
  width: 70%;
  height: 15px;
  border: 1px solid blue;
  padding: 10px;
  background-color: blue;
  animation: introbox-one 1s ease-in;
}

@keyframes introbox-one {
  0% {
    transform: translateX(-100%);
  }
}

.introbox-two {
  margin-top: 20px;
  width: 60%;
  height: 15px;
  border: 1px solid blue;
  padding: 10px;
  background-color: blue;
  animation: introbox-two 1s ease-in;
}

@keyframes introbox-two {
  0% {
    transform: translateX(-100%);
  }
}

.introbox-three {
  margin-top: 20px;
  margin-left: 30%;
  width: 70%;
  height: 15px;
  border: 1px solid blue;
  padding: 10px;
  background-color: blue;
  animation: introbox-three 1s ease-in;
}

@keyframes introbox-three {
  0% {
    transform: translateX(100%);
  }
}

<body>
    <div class="introbox-one"></div>

    <div class="introbox-two"></div>

    <div class="introbox-three"></div>
  </body>

【问题讨论】：

标签： css css-animations css-transforms

【解决方案1】：

这是你想要做的吗？

PS：出现水平滚动条是因为通过转换 div 使它们比容器更大，创建 overflow，滚动条是元素的默认行为弹出以允许用户通过滚动查看溢出的内容。您可以通过将容器元素“溢出-x”（用于水平溢出）和“溢出-y”（用于垂直溢出）设置为“隐藏”来覆盖此行为；这将禁用滚动条弹出，内容的溢出部分将永远不可见。

body {
  margin: 0;
}

.introbox {
  width: 70%;
  height: 15px;
  margin: 20px 0;
  border: 1px solid blue;
  padding: 10px;
  background-color: blue;
  animation: introbox-one 1s ease-in;
}

@keyframes introbox-one {
  0% {
    width: 0;
  }
  
  100% {
    width: 70%;
  }
}

.introbox-three {
 margin-left:auto;
}

<body>
    <div class="introbox introbox-one"></div>

    <div class="introbox introbox-two"></div>

    <div class="introbox introbox-three"></div>
  </body>

【讨论】：

【解决方案2】：

由于第三个div 元素溢出，默认情况下它允许您滚动。可以使用overflow-x 属性更改此行为，并将其设置为hidden 可防止滚动。我们将其添加到父元素，在本例中为主体。

body {
  margin: 0;
  overflow-x: hidden;
}


.introbox-one {
  width: 70%;
  height: 15px;
  border: 1px solid blue;
  padding: 10px;
  background-color: blue;
  animation: introbox-one 1s ease-in;
}

@keyframes introbox-one {
  0% {
    transform: translateX(-100%);
  }
}

.introbox-two {
  margin-top: 20px;
  width: 60%;
  height: 15px;
  border: 1px solid blue;
  padding: 10px;
  background-color: blue;
  animation: introbox-two 1s ease-in;
}

@keyframes introbox-two {
  0% {
    transform: translateX(-100%);
  }
}

.introbox-three {
  margin-top: 20px;
  margin-left: 30%;
  width: 70%;
  height: 15px;
  border: 1px solid blue;
  padding: 10px;
  background-color: blue;
  animation: introbox-three 1s ease-in;
}

@keyframes introbox-three {
  0% {
    transform: translateX(100%);
  }
}

<body>
    <div class="introbox-one"></div>

    <div class="introbox-two"></div>

    <div class="introbox-three"></div>
  </body>

【讨论】：