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，从 0% 到 2% 以及从 20% 到 25%，即总共 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>

这是你想要的吗？