CSS加载程序|转换和；盒阴影动画错误

我正在使用，但在div对齐的中心使用

transform:translate（-50%，-50%）

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

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

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

当我在stackoverflow代码段中尝试JS Fiddle中的相同代码时，错误并没有发生，正如下面所示

.center{
位置：绝对位置；
最高：50%；
左：50%；
显示：块；
-webkit转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
}
加载器：之前，
加载器：之后，
.加载器{
边界半径：50%；
宽度：2.5em；
高度：2.5em；
-webkit动画填充模式：两者都有；
动画填充模式：两者都有；
-webkit动画：加载7 1.8s无限轻松输入输出；
动画：加载7 1.8秒无限轻松输入输出；
}
.加载器{
颜色：#f00；
字号：2px；
保证金：20px自动；
位置：相对位置；
文本缩进：-9999em；
-webkit转换：translateZ（0）；
-ms变换：translateZ（0）；
变换：translateZ（0）；
-webkit动画延迟：-0.16s；
动画延迟：-0.16s；
}
加载器：以前{
左：-3.5em；
-webkit动画延迟：-0.32s；
动画延迟：-0.32s；
}
加载器：之后{
左：3.5em；
}
加载器：之前，
加载器：之后{
内容：''；
位置：绝对位置；
排名：0；
}
@-webkit关键帧加载7{
0%, 80%, 100% {
盒影：0.2.5em 0-1.3em；
}
40% {
盒影：0.2.5em 0；
}
}
@关键帧加载7{
0%, 80%, 100% {
盒影：0.2.5em 0-1.3em；
}
40% {
盒影：0.2.5em 0；
}
}

加载。。。

删除

转换：translateZ（0）在
.loader
类上。

这里没有必要，将内容设置为“更多到底部”