0
我有一個居中文字旋轉動畫的問題。第一個單詞正確顯示在頁面中心（水平和垂直居中），但第二個單詞出現在屏幕頂部（僅水平居中）。我希望它們一個接一個出現在頁面的中心。提前致謝！居中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>
「第一」出現在左上角我。 – j08691
我看到@ j08691。改變'position：static;'在'.slidingHorizontal span'中居中文本。 （在Mac上使用最新的Chrome進行測試） – Jack