css - 居中CSS文字旋转动画

Question

我在将文本旋转动画居中时遇到问题。第一个单词正确显示在页面中央(水平和垂直居中)，但第二个和第三个单词出现在屏幕顶部(仅水平居中)。我希望它们一个接一个地出现在页面的中央。提前致谢!

这里是使用的代码:

.slidingHorizontal{
	font-family: Helvetica ;
	font-size: 82px;
	text-shadow: grey 0px 0px 4px ;
	text-align: center;
	display: inline;
	text-indent: 8px;
    color: black;
}
.slidingHorizontal span{
	animation: leftToRight 7.5s linear infinite 0s;
	-ms-animation: leftToRight 7.5s linear infinite 0s;
	-webkit-animation: leftToRight 7.5s linear infinite 0s;
	opacity: 0;
	position: static;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
}
.slidingHorizontal span:nth-child(2){
	animation-delay: 2.5s;
	-ms-animation-delay: 2.5s;
	-webkit-animation-delay: 2.5s;
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
}
.slidingHorizontal span:nth-child(3){
	animation-delay: 5s;
	-ms-animation-delay: 5s;
	-webkit-animation-delay: 5s;
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
}


@-moz-keyframes leftToRight{
	0% { opacity: 0; }
	5% { opacity: 0; -moz-transform-origin: 50% 50%; }
	10% { opacity: 1; -moz-transform-origin: 50% 50%; }
	25% { opacity: 1; -moz-transform-origin: 50% 50%; }
	30% { opacity: 0; -moz-transform-origin: 50% 50%; }
	80% { opacity: 0; }
	100% { opacity: 0; }
}
@-webkit-keyframes leftToRight{
	0% { opacity: 0; }
	5% { opacity: 0; -webkit-transform-origin: 50% 50%; }
	10% { opacity: 1; -webkit-transform-origin: 50% 50%; }
	25% { opacity: 1; -webkit-transform-origin: 50% 50%; }
	30% { opacity: 0; -webkit-transform-origin: 50% 50%; }
	80% { opacity: 0; }
	100% { opacity: 0; }
}
@-ms-keyframes leftToRight{
	0% { opacity: 0; }
	5% { opacity: 0; -ms-transform-origin: 50% 50%; }
	10% { opacity: 1; -ms-transform-origin: 50% 50%; }
	25% { opacity: 1; -ms-transform-origin: 50% 50%; }
	30% { opacity: 0; -ms-transform-origin: 50% 50%; }
	80% { opacity: 0; }
	100% { opacity: 0; }
}

<div class="slidingHorizontal">
      <span>FIRST</span>
      <span>SECOND</span>
      <span>THIRD</span>
</div>

Answer 1

first 也显示在我的左下角。

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

查看演示:jsfiddle.net/y5L5xb6a/