CSS-为什么文本生成后会移动（动画）？

Question

我有一个关于CSS动画的问题，特别是关于打字效果。

我在动画中实现了字体书写效果，但是，即使我没有设置转换动画，一旦字体生成，文字就会移动到右手边。

为什么会出现这种情况，我如何解决这个问题？

    @keyframes fade{

        0%{
            transform:translateY(30px);
            opacity:0
        }

        100%{
            transform:translateY(0);
            opacity:1
        }

}

我的完整代码附在下面的链接中。

https:/codepen.iojotnajoapenabvVzev，我的完整代码附在下面的链接中。

Answer 1

貌似是继承了其父元素.beggining的text-align:center。

.explanation在潜水宽度增长到100%的时候，保持着它的居中状态。这就是为什么看起来它的位置是动画的原因。