css - 如何使用 CSS 旋转多个单词？

Question

我正在尝试使用 CSS 和 HTML 为单个单词制作动画。我希望单词淡入、保持可见然后淡出，然后我想继续下一个单词。

我遵循了本教程(http://tympanus.net/codrops/2012/04/17/rotating-words-with-css-animations)，但问题是我无法理解如何在@keyframes 动画中设置持续时间的百分比，因为在教程中它刚刚写成:

Our animations will run one cycle, meaning that each span will be shown once for three seconds, hence the delay value. The whole animation will run 6 (number of images) * 3 (appearance time) = 18 seconds. We will need to set the right percentage for the opacity value (or whatever makes the span appear). Dividing 6 by 18 gives us 0.333… which would be 33% for our keyframe step. Everything that we want to happen to the span needs to happen before that. So, after tweaking and seeing what fits best, we come up with the following animation for the first words

在我的例子中，我的整个动画长 16 秒(因为我有 4 个字 * 4 秒)，所以 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{
	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; }
    2% { opacity: 0; -webkit-transform: translateX(0px); }
	5% { opacity: 1; -webkit-transform: translateX(0px);}
    17% { opacity: 1; -webkit-transform: translateX(0px); }
	20% { opacity: 0; -webkit-transform: translateX(0px); }
	80% { opacity: 0; }
    100% { opacity: 0; }
}
@-ms-keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; -ms-transform: translateX(0px); }
	5% { opacity: 1; -ms-transform: translateX(0px);}
    17% { opacity: 1; -ms-transform: translateX(0px); }
	20% { opacity: 0; -ms-transform: translateX(0px); }
	80% { opacity: 0; }
    100% { opacity: 0; }
}
@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; }
}

<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% 为 0，总共 1.12 秒。我将其从 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>

这是你想要的吗？