为什么内部块css过渡效果会使父文本变得更长？

Question

如果我有一些具有CSS转换过渡的块，并且它具有较长转换持续时间的子节点，并且主块中的其他转换属性文本被模糊，直到子动画结束。它有什么办法吗？即使另一个单独的块有动画它会使文本失效，是否有某种方法可以分离这些效果？

.parent {
  margin:10px;
  width: 100px;
  height: 100px;
  background: #000;
  color: #aabb00;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.parent:hover {
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05) ;
  -ms-transform: scale(1.05) ;
  -o-transform: scale(1.05) ;
  transform: scale(1.05) ;
}
.parent:hover .child {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg) ;
  -ms-transform: rotate(360deg) ;
  -o-transform: rotate(360deg) ;
  transform: rotate(360deg) ;
}

.child {
  width: 10px;
  height: 10px;
  background: #fff;
  -webkit-transition: all 1.5s;
  -moz-transition: all 1.5s;
  -ms-transition: all 1.5s;
  -o-transition: all 1.5s;
  transition: all 1.5s;
}

<div class="parent">
  <div>
    <div class="child"></div>
  </div>
    <div>1234123412</div>
</div>

<div class="parent">
  <div>
    <div></div>
  </div>
    <div>1234123412</div>
</div>

Answer 1

实际上，它的标准浏览器行为在其调整大小时模糊文本，它来自优化缓动，用于渲染新文本而不是在每个动画帧中，但在动画结束后。它无法修复。