居中CSS文字旋转动画

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

下面是使用的代码：

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

 

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

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

来源

2015-10-08 suchanoob

“第一”出现在左上角我。 – j08691

我看到@ j08691。改变'position：static;'在'.slidingHorizontal span'中居中文本。（在Mac上使用最新的Chrome进行测试） – Jack

首先是显示在左侧开出角球，我也是如此。

看看这里，在页面

中间那些都集中看到演示：jsfiddle.net/y5L5xb6a/

来源

2015-10-08 22:47:37 user2517200

居中CSS文字旋转动画

回答

相关问题