让CSS动画显示列表中的最后一项

我试图创建一个只使用CSS3的动画，它将显示一个项目列表

我已经能够创建一个循环遍历列表中每个项目的动画，但是，我无法找到一个解决方案，让动画以列表中最后一个项目的显示结束

基本上，我希望动画以“Johnney be good”字样结束

据推测，这一问题已在以下章节中得到了回答：

然而，我不知道该解决方案是否或如何应用于我的问题。谢谢你的帮助，非常感谢

#句子包装器{
宽度：80%；
位置：相对位置；
利润率：110px自动0自动；
字体系列：衬线；
填充：10px；
}
.判决{
保证金：0；
文本对齐：左对齐；
文本阴影：1px 1px 1px rgba（255255255,0.8）；
}
.句子跨度{
颜色：#444；
字体大小：200%；
字体大小：正常；
}
.文字{
显示：内联；
文本缩进：10px；
}
.单词-1跨度{
位置：绝对位置；
不透明度：0；
溢出：隐藏；
颜色：#6b969d；
-webkit动画：rotateWord 12s10s；
-moz动画：rotateWord 12s10s；
-o型动画：旋转方向12s10s；
-ms动画：旋转方向12s10s；
动画：旋转方向12s10s；
}
第n个孩子（2）{
-webkit动画延迟：3s；
-moz动画延迟：3s；
-o-动画延迟：3s；
-ms动画延迟：3s；
动画延迟：3s；
颜色：#6b969d；
}
第n个孩子（3）{
-webkit动画延迟：6s；
-moz动画延迟：6s；
-o-动画延迟：6s；
-ms动画延迟：6s；
动画延迟：6秒；
颜色：#6b969d；
}
第n个孩子（4）{
-webkit动画延迟：9秒；
-moz动画延迟：9秒；
-o-动画延迟：9秒；
-毫秒动画延迟：9秒；
动画延迟：9秒；
颜色：#6b969d；
}
@-webkit关键帧旋转方向{
0%{不透明度：0；}
2%{opacity:0；-webkit transform:translateY（-30px）；}
5%{opacity:1；-webkit transform:translateY（0px）；}
17%{opacity:1；-webkit transform:translateY（0px）；}
20%{opacity:0；-webkit transform:translateY（30px）；}
80%{不透明度：0；}
100%{不透明度：0；}
}

约翰尼
聪明的
聪明的
令人惊叹的
乖

“保持良好”

使用与其他

相同的动画（

旋转方向）。以
opacity结尾：0。如果不希望“be good”在淡入后淡出，则应为其定义单独的动画：

@keframes rotateWordFinal{
  0% { opacity: 0; }
  50% { opacity: 0; -webkit-transform: translateY(-30px); }
  100% { opacity: 1; -webkit-transform: translateY(0px);}
}

.words-1 span:nth-child(4){
  animation: rotateWordFinal 6s 1 9s;
}

另外：您对动画属性使用了所有类型的前缀，但对实际的
@关键帧不使用前缀。最好保持一致。
的“be good”
使用与其他
相同的动画（
rotateWord
）。以
opacity结尾：0。如果不希望“be good”在淡入后淡出，则应为其定义单独的动画：

@keframes rotateWordFinal{
  0% { opacity: 0; }
  50% { opacity: 0; -webkit-transform: translateY(-30px); }
  100% { opacity: 1; -webkit-transform: translateY(0px);}
}

.words-1 span:nth-child(4){
  animation: rotateWordFinal 6s 1 9s;
}

另外：您对动画属性使用了所有类型的前缀，但对实际的
@关键帧不使用前缀。最好保持一致。
您需要为最后一个
span
创建单独的动画


#句子包装器{
字体系列：衬线；
利润率：110px自动0自动；
填充：10px；
位置：相对位置；
宽度：80%；
}
.判决{
保证金：0；
文本对齐：左对齐；
文本阴影：1px1px1pRGBA（255,255,255,0.8）；
}
.句子跨度{
颜色：#444；
字体大小：200%；
字体大小：正常；
}
.文字{
显示：内联；
文本缩进：10px；
}
.单词-1跨度{
动画：旋转方向12s10s；
颜色：#6b969d；
不透明度：0；
溢出：隐藏；
位置：绝对位置；
}
.单词-1跨度：第n个孩子（2）{
动画延迟：3s；
}
.单词-1跨度：第n个孩子（3）{
动画延迟：6秒；
}
最后一个孩子{
动画延迟：9秒；
动画填充模式：正向；
动画名称：rotateLast；
}
@关键帧旋转方向{
0%,80%,100%{
不透明度：0；
}
2% {
不透明度：0；
转换：translateY（-30px）；
}
5%,17%{
不透明度：1；
变换：translateY（0px）；
}
20%{
不透明度：0；
变换：translateY（30px）；
}
}
@旋转的关键帧{
0%{
不透明度：0；
}
2%{
不透明度：0；
转换：translateY（-30px）；
}
5%,100%{
不透明度：1；
变换：translateY（0px）；
}
}

约翰尼
聪明的
聪明的
令人惊叹的
乖
您需要为最后一个
span
创建单独的动画


#句子包装器{
字体系列：衬线；
利润率：110px自动0自动；
填充：10px；
位置：相对位置；
宽度：80%；
}
.判决{
保证金：0；
文本对齐：左对齐；
文本阴影：1px1px1pRGBA（255,255,255,0.8）；
}
.句子跨度{
颜色：#444；
字体大小：200%；
字体大小：正常；
}
.文字{
显示：内联；
文本缩进：10px；
}
.单词-1跨度{
动画：旋转方向12s10s；
颜色：#6b969d；
不透明度：0；
溢出：隐藏；
位置：绝对位置；
}
.单词-1跨度：第n个孩子（2）{
动画延迟：3s；
}
.单词-1跨度：第n个孩子（3）{
动画延迟：6秒；
}
最后一个孩子{
动画延迟：9秒；
动画填充模式：正向；
动画名称：rotateLast；
}
@关键帧旋转方向{
0%,80%,100%{
不透明度：0；
}
2% {
不透明度：0；
转换：translateY（-30px）；
}
5%,17%{
不透明度：1；
变换：translateY（0px）；
}
20%{
不透明度：0；
变换：translateY（30px）；
}
}
@旋转的关键帧{
0%{
不透明度：0；
}
2%{
不透明度：0；
转换：translateY（-30px）；
}
5%,100%{
不透明度：1；
变换：translateY（0px）；
}
}

约翰尼
聪明的
聪明的
令人惊叹的
乖
我用
animation-f就快搞定了