如何用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>

这是你想要的吗？