如何用CSS旋轉多個單詞？

Question

我正在嘗試使用CSS和HTML爲單個詞創建動畫。我希望這個單詞淡入，保持可見狀態，然後淡出，之後，我想繼續下一個單詞。

我跟着這個教程（http://tympanus.net/codrops/2012/04/17/rotating-words-with-css-animations），但問題是，我無法理解如何設置在@keyframes動畫時長的比例，因爲在本教程中，它只是寫：

我們的動畫將運行一個循環，這意味着每個跨度將顯示一次三秒，因此延遲值。整個動畫將運行6（圖像數量）* 3（出現時間）= 18秒。我們需要爲不透明度值設置正確的百分比（或任何使得跨度顯示的百分比）。將6除以18得出0.333 ...對於我們的關鍵幀步驟將是33％。我們希望發生的所有事情都需要在此之前發生。因此，調整和看到的最適合後，我們來到了下面動畫第一話

就我而言，我的整個動畫16S長（因爲我有4個字* 4S），因此4/16 = 0,25，這就是爲什麼一切都需要在25％之前發生。

這裏是我的動畫代碼：

@keyframes rotateWord { 
    0% { opacity: 0; } 
    2% { opacity: 0; -webkit-transform: translateX(0px); transform: translateX(0px); } 
    5% { opacity: 1; -webkit-transform: translateX(0px); transform: translateX(0px);} 
    17% { opacity: 1; -webkit-transform: translateX(0px); transform: translateX(0px); } 
    20% { opacity: 0; -webkit-transform: translateX(00px); transform: translateX(0px); } 
    80% { opacity: 0; } 
    100% { opacity: 0; } 
} 

這是一個完整的演示：

.rw-words-1 span{ 
 
\t position: absolute; 
 
\t opacity: 0; 
 
\t overflow: hidden; 
 
\t -webkit-animation: rotateWord 16s linear infinite 0s; 
 
\t -ms-animation: rotateWord 16s linear infinite 0s; 
 
\t animation: rotateWord 16s linear infinite 0s; 
 
} 
 
.rw-words-1 span:nth-child(2) { 
 
    -webkit-animation-delay: 4s; 
 
\t -ms-animation-delay: 4s; 
 
\t animation-delay: 4s; 
 
} 
 
.rw-words-1 span:nth-child(3) { 
 
    -webkit-animation-delay: 8s; 
 
\t -ms-animation-delay: 8s; 
 
\t animation-delay: 8s; 
 
} 
 
.rw-words-1 span:nth-child(4) { 
 
    -webkit-animation-delay: 12s; 
 
\t -ms-animation-delay: 12s; 
 
\t animation-delay: 12s; 
 
} 
 

 
@-webkit-keyframes rotateWord { 
 
    0% { opacity: 0; } 
 
    2% { opacity: 0; -webkit-transform: translateX(0px); } 
 
\t 5% { opacity: 1; -webkit-transform: translateX(0px);} 
 
    17% { opacity: 1; -webkit-transform: translateX(0px); } 
 
\t 20% { opacity: 0; -webkit-transform: translateX(0px); } 
 
\t 80% { opacity: 0; } 
 
    100% { opacity: 0; } 
 
} 
 
@-ms-keyframes rotateWord { 
 
    0% { opacity: 0; } 
 
    2% { opacity: 0; -ms-transform: translateX(0px); } 
 
\t 5% { opacity: 1; -ms-transform: translateX(0px);} 
 
    17% { opacity: 1; -ms-transform: translateX(0px); } 
 
\t 20% { opacity: 0; -ms-transform: translateX(0px); } 
 
\t 80% { opacity: 0; } 
 
    100% { opacity: 0; } 
 
} 
 
@keyframes rotateWord { 
 
    0% { opacity: 0; } 
 
    2% { opacity: 0; -webkit-transform: translateX(0px); transform: translateX(0px); } 
 
\t 5% { opacity: 1; -webkit-transform: translateX(0px); transform: translateX(0px);} 
 
    17% { opacity: 1; -webkit-transform: translateX(0px); transform: translateX(0px); } 
 
\t 20% { opacity: 0; -webkit-transform: translateX(00px); transform: translateX(0px); } 
 
\t 80% { opacity: 0; } 
 
    100% { opacity: 0; } 
 
}

<div class="rw-words rw-words-1"> 
 
    <span>Word 1</span> 
 
    <span>Word 2</span> 
 
    <span>Word 3</span> 
 
    <span>Word 4</span> 
 
</div>

的jsfiddle：https://jsfiddle.net/wx8r5kj7/

所以我的問題是如何正確設置@keyframes動畫的百分比。

Answer 1

如果動畫要在前25％內完成，並且您不希望單詞完全透明過長，則可以減少不透明度爲0的時段。
在您的片段中，不透明度從0％到2％和從20％到25％，或總共1.12秒的0。我把它從24％改爲25％，大約只有0.16秒。

.rw-words-1 span{ 
 
    position: absolute; 
 
    opacity: 0; 
 
    overflow: hidden; 
 
    -webkit-animation: rotateWord 16s linear infinite 0s; 
 
    -ms-animation: rotateWord 16s linear infinite 0s; 
 
    animation: rotateWord 16s linear infinite 0s; 
 
} 
 
.rw-words-1 span:nth-child(2) { 
 
    -webkit-animation-delay: 4s; 
 
    -ms-animation-delay: 4s; 
 
    animation-delay: 4s; 
 
} 
 
.rw-words-1 span:nth-child(3) { 
 
    -webkit-animation-delay: 8s; 
 
    -ms-animation-delay: 8s; 
 
    animation-delay: 8s; 
 
} 
 
.rw-words-1 span:nth-child(4) { 
 
    -webkit-animation-delay: 12s; 
 
    -ms-animation-delay: 12s; 
 
    animation-delay: 12s; 
 
} 
 

 
@-webkit-keyframes rotateWord { 
 
    0% { opacity: 0; -webkit-transform: translateX(0px); } 
 
    3% { opacity: 1; -webkit-transform: translateX(0px);} 
 
    21% { opacity: 1; -webkit-transform: translateX(0px); } 
 
    24% { opacity: 0; -webkit-transform: translateX(0px); } 
 
    80% { opacity: 0; } 
 
    100% { opacity: 0; } 
 
} 
 
@-ms-keyframes rotateWord { 
 
    0% { opacity: 0; -ms-transform: translateX(0px); } 
 
    3% { opacity: 1; -ms-transform: translateX(0px);} 
 
    21% { opacity: 1; -ms-transform: translateX(0px); } 
 
    24% { opacity: 0; -ms-transform: translateX(0px); } 
 
    80% { opacity: 0; } 
 
    100% { opacity: 0; } 
 
} 
 
@keyframes rotateWord { 
 
    0% { opacity: 0; -webkit-transform: translateX(0px); transform: translateX(0px); } 
 
    3% { opacity: 1; -webkit-transform: translateX(0px); transform: translateX(0px);} 
 
    21% { opacity: 1; -webkit-transform: translateX(0px); transform: translateX(0px); } 
 
    24% { opacity: 0; -webkit-transform: translateX(00px); transform: translateX(0px); } 
 
    80% { opacity: 0; } 
 
    100% { opacity: 0; } 
 
}

<div class="rw-words rw-words-1"> 
 
    <span>Word 1</span> 
 
    <span>Word 2</span> 
 
    <span>Word 3</span> 
 
    <span>Word 4</span> 
 
</div>

這是你想要的嗎？