CSS 加载器 |变换和框阴影动画错误

Question

我使用CSS Loaders，但在div对齐的中心内使用transform: translate(-50%, -50%)。

请注意，动画使用的是长方体阴影。

问题：动画圆展开时会从底部被切掉。

我尝试过：如果我通过增加字体大小来增加圆圈的大小，则截断会减少，即如果我将字体大小更改为15 px，则截断几乎会消失。

JS Fiddle

当我在stackoverflow代码片段中尝试JS Fiddle中的相同代码时，错误并没有发生，正如您在下面看到的那样！

    .center {
      position: absolute;
      top: 50%;
      left: 50%;
      display: block;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }
    .loader:before,
    .loader:after,
    .loader {
      border-radius: 50%;
      width: 2.5em;
      height: 2.5em;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      -webkit-animation: load7 1.8s infinite ease-in-out;
      animation: load7 1.8s infinite ease-in-out;
    }
    .loader {
      color: #f00;
      font-size: 2px;
      margin: 20px auto;
      position: relative;
      text-indent: -9999em;
      -webkit-transform: translateZ(0);
      -ms-transform: translateZ(0);
      transform: translateZ(0);
      -webkit-animation-delay: -0.16s;
      animation-delay: -0.16s;
    }
    .loader:before {
      left: -3.5em;
      -webkit-animation-delay: -0.32s;
      animation-delay: -0.32s;
    }
    .loader:after {
      left: 3.5em;
    }
    .loader:before,
    .loader:after {
      content: '';
      position: absolute;
      top: 0;
    }
    @-webkit-keyframes load7 {
      0%, 80%, 100% {
        box-shadow: 0 2.5em 0 -1.3em;
      }
      40% {
        box-shadow: 0 2.5em 0 0;
      }
    }
    @keyframes load7 {
      0%, 80%, 100% {
        box-shadow: 0 2.5em 0 -1.3em;
      }
      40% {
        box-shadow: 0 2.5em 0 0;
      }
    }

<div class="center">
  <div class="loader">Loading...</div>
</div>

Answer 1

删除.loader类上的transform: translateZ(0);
这里没有必要，并将内容设置为"更多到底"。