中心CSS文本旋转动画

Question

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

以下是使用的代码：

＆＃13;

＆＃13;

.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; }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

首先在我的左角显示。

看看这里，这些都集中在页面中间

参见演示：jsfiddle.net/y5L5xb6a/