CSS 装载机 |变换和框阴影动画错误

Question

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

请注意，动画使用的是框阴影。

问题：动画圈在展开时从底部被切断。

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

当我在 Whosebug 代码片段中尝试来自 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

删除 transform: translateZ(0); .loader class。
这里不用设置内容"more to bottom".

CSS 装载机 |变换和框阴影动画错误

CSS Loaders | Transform & box-shadow animation bug

css

css-transforms

css-animations

box-shadow