css - 为什么是边框尺寸：边框框；不工作？

Question

我想为 div 的宽度设置动画，从 0 开始。但是由于填充，div 永远不会小于我设置的填充。我尝试使用border-sizing: border-box;但它不起作用。

我在这里做错了什么？

这是我的笔。

font-size: 14px;
box-sizing: border-box;
color: #fff;
background: #E2001A;
position: absolute;
margin: 85px;
overflow: hidden;
padding: 8px 10px;
white-space: nowrap;
width: 2px;

Answer 1

我发现并测试过的最有效的解决方案是这个：

.hotspotCaption {
  font-size: 14px;
  box-sizing: border-box;
  color: #fff;
  background: #E2001A;
  position: absolute;
  margin: 85px;
  overflow: hidden;
  padding: 0;
  white-space: nowrap;
  width: 0px;
  animation-duration: 1s; /* Change duration */
  animation-name: appear; /* Change its name */
  animation-iteration-count: 1; /* Change how many times it repeats */
  animation-direction: normal; /* Change its direction */
  animation-fill-mode: forwards; /* specifies a style when the animation stops */
}

@keyframes appear {
  from {
    padding: 0;
    width: 0;
  }
  to {
    padding: 8px 10px;
    width: 255px;
  }
}

<div class="hotspotCaption">Consectetur Purus Fermentum Commodo</div>

另外，这是我制作的一支笔：Link。

它不起作用，因为box-sizing: border-box;不会以您想要的方式影响填充，并且首先没有transition或animation应用。事情是制作一个在其起始位置包含填充的动画，并将其设为零。希望此解决方案对您有所帮助！

Answer 2

<style>
.hotspotCaption1 {
  width: 300px;
  height: 100px;  
  padding: 50px;
  border: 1px solid red;
   box-sizing: border-box;
}

.hotspotCaption2 {
  width: 300px;
  height: 100px;  
  padding: 50px;
  border: 1px solid red;
}
</style>

<div class="hotspotCaption1">Consectetur Purus Fermentum Commodo</div><br>

<div class="hotspotCaption2">Consectetur Purus Fermentum Commodo</div>

您的代码工作正常，但您为 div 提供了非常小的宽度，您可以意识到只需提供更多宽度并创建两个不同的 div，一个带有 box-sizing，另一个没有 box-sizing。

Answer 3

将您的 div 包裹在另一个 div 中，并为父 div 的宽度设置动画。

.hotspotCaption {
  font-size: 14px;
  box-sizing: border-box;
  color: #fff;
  background: #E2001A;
  padding: 8px 10px;
  white-space: nowrap;
}

.outer-wrp {
  margin: 85px;
  width: 2px;
  overflow: hidden;
}

<div class="outer-wrp">
  <div class="hotspotCaption">
    Consectetur Purus Fermentum Commodo
  </div>
</div>