中心CSS文本旋转动画

我无法将文本旋转动画居中。第一个单词正确显示在页面中心，水平和垂直居中，但第二个和第三个单词仅显示在屏幕顶部，水平居中。我希望它们一个接一个地出现在页面的中心。提前谢谢

以下是使用的代码：

.水平滑动{ 字体系列：Helvetica； 字号：82px； 文本阴影：灰色0px 0px 4px； 文本对齐：居中； 显示：内联； 文本缩进：8px； 颜色：黑色； } .滑动水平跨度{ 动画：leftToRight 7.5s线性无限0； -ms动画：leftToRight 7.5s线性无限0s； -webkit动画：leftToRight 7.5s线性无限0； 不透明度：0； 位置：静态； 左：0px； 顶部：0px； 宽度：100%； 身高：100%； z指数：9999； } .滑动水平跨度：N-child2{ 动画延迟：2.5s； -ms动画延迟：2.5s； -webkit动画延迟：2.5s； 位置：固定； 左：0px； 顶部：0px； 宽度：100%； 身高：100%； z指数：9999； } .滑动水平跨度：N-child3{ 动画延迟：5s； -ms动画延迟：5s； -webkit动画延迟：5s； 位置：固定； 左：0px； 顶部：0px； 宽度：100%； 身高：100%； z指数：9999； } @-moz关键帧leftToRight{ 0%{不透明度：0；} 5%{不透明度：0；-moz变换原点：50%50%；} 10%{不透明度：1；-moz变换原点：50%50%；} 25%{不透明度：1；-moz变换原点：50%50%；} 30%{不透明度：0；-moz变换原点：50%50%；} 80%{不透明度：0；} 100%{不透明度：0；} } @-webkit关键帧leftToRight{ 0%{不透明度：0；} 5%{不透明度：0；-webkit变换原点：50%50%；} 10%{不透明度：1；-webkit变换原点：50%50%；} 25%{不透明度：1；-webkit变换原点：50%50%；} 30%{不透明度：0；-webkit变换原点：50%50%；} 80%{不透明度：0；} 100%{不透明度：0；} } @-ms关键帧leftToRight{ 0%{不透明度：0；} 5%{不透明度：0；-ms变换原点：50%50%；} 10%{不透明度：1；-ms变换原点：50%50%；} 25%{不透明度：1；-ms变换原点：50%50%；} 30%{不透明度：0；-ms变换原点：50%50%；} 80%{不透明度：0；} 100%{不透明度：0；} } 第一 第二 第三

---

首先是在左上角为我展示

请看这里，它们都集中在页面

中间。

---

请参见演示：jsfiddle.net/y5L5xb6a/

首先出现在我的左上角。我看到的与@j08691相同。改变位置：静态；在中。滑动水平跨度使文本居中。在Mac上使用最新的Chrome进行测试