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; }
}

这是一个完整的演示：

＆＃13;

.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; }
}

＆＃13;

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

＆＃13;

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

所以我的问题是如何正确设置@keyframes动画的百分比。

Answer 1

如果要在前25％完成动画，并且您不希望单词完全透明太长时间，只需减少不透明度为0的时间段。
在您的代码段中，不透明度为0，从0％到2％，从20％到25％，或总共1.12秒。我将其改为仅24％至25％，或约0.16秒。

＆＃13;

.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; }
}

＆＃13;

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

＆＃13;

这是你想要的吗？

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

1 个答案: