Question

此问题与之前解决的问题类似： CSS text-align delay with width animation

我有一个动画，宽度从0％到100％，目的是加载页面时看不到任何文本，然后立即从左向右显示它。

我注意到，加上填充，左侧文本的第一部分已经可见。这是什么原因呢？谢谢！

@keyframes leftright {
      0% {
        max-width: 0%;
      }
      100% {
        max-width: 100%;
      }
    }

    .test_1 {
      overflow: hidden;
      white-space: nowrap;
      width: 80vw;
      padding: 0 10vw;
      border: 1px solid red;
      font: bold 15vmin 'Playfair Display', serif;
      animation: leftright 1s;
    }

 <div class="test_1">Why hello there</div>

Answer 1

这是因为CSS的width属性（以及max-width和min-width属性）引用了content width。内容是box model中的边距，边框和填充内容。

如果您查看div.test_1的起始属性，则它们是：

.test_1 {
   overflow: hidden;
   white-space: nowrap;
   padding: 0 10vw;  
   max-width: 0;
   border: 1px solid red;
   font: bold 15vmin 'Playfair Display', serif;
}

<div class="test_1">Why hello there</div>

元素的视觉宽度实际上是由于10vw的左侧和右侧填充值 plus 的宽度，以及左侧和右侧边框宽度 plus 的宽度

要解决此问题，您可以执行JasonB建议的操作。

或者，您可以在keyframes中包含填充，这也具有使（左右）填充动画的副作用。

@keyframes leftright {
  0% {
    padding: 0;
    max-width: 0;
  }
  100% {
    padding: 0 10vw;
    max-width: 100%;
  }
}

.test_1 {
  overflow: hidden;
  white-space: nowrap;
  /* width: 80vw;  <-- I removed this as it appears to contradict with max-width */
  border: 1px solid red;
  font: bold 15vmin 'Playfair Display', serif;
  max-width: 100%;
  padding: 0 10vw;
  animation: leftright 1s;
}

<div class="test_1">Why hello there</div>

Answer 2

通过拆分演示文稿和动画作业并将它们分配给单独的div，可以实现所需的行为，而不会产生有害的副作用。

这里是另一个问题，有一个答案可以解释为什么填充的div的宽度不为零。 border-box with padding can't have 0 width

@keyframes leftright {
  0% {
    max-width: 0%;
  }
  100% {
    max-width: 100%;
  }
}

.test_1 {
  animation: leftright 10s;
  overflow: hidden;
  white-space: nowrap;
  width: 80vw;
  border: 1px solid red;
}

.test_2 {
  padding: 0 10vw;
  font: bold 15vmin 'Playfair Display', serif;
}

<div class="test_1">
  <div class="test_2">Why hello there</div>
</div>

填充对宽度动画的意外影响

2 个答案: