Html CSS动画无法识别嵌套跨距

我有一些HTML，由CSS设置动画，第n个子元素在跨度列表中迭代

/*正文*/
身体{
背景色：#fff；
字体系列：“世纪哥特式”，无衬线；
字体大小：300；
/*空白：预包装*/
}
/*判决*/
.判决{
颜色：#222；
字体大小：20px；
文本对齐：左对齐；
}
.橙色{
颜色：橙色！重要；
}
/*垂直翻转*/
垂直翻转{
显示：内联；
文本缩进：8px；
}
.垂直翻转跨度{
动画：垂直15s线性无限0s；
-ms动画：垂直15s线性无限0s；
-webkit动画：垂直15s线性无限0s；
颜色：#000；
不透明度：0；
溢出：隐藏；
位置：绝对位置；
}
.垂直翻转跨度：第n个孩子（2）{
动画延迟：2.5s；
-ms动画延迟：2.5s；
-webkit动画延迟：2.5s；
}
.垂直翻转跨度：第n个孩子（3）{
动画延迟：5s；
-ms动画延迟：5s；
-webkit动画延迟：5s；
}
.垂直翻转跨度：第n个孩子（4）{
动画延迟：7.5s；
-ms动画延迟：7.5s；
-webkit动画延迟：7.5s；
}
.垂直翻转跨度：第n个孩子（5）{
动画延迟：10秒；
-毫秒动画延迟：10秒；
-webkit动画延迟：10秒；
}
.垂直翻转跨度：第n个孩子（6）{
动画延迟：12.5s；
-ms动画延迟：12.5s；
-webkit动画延迟：12.5s；
}
/*垂直翻转动画*/
@-moz关键帧垂直{
0%{不透明度：0；}
5%{opacity:0；-moz变换：rotateX（180度）；}
10%{opacity:1；-moz变换：translateY（0px）；}
25%{opacity:1；-moz变换：translateY（0px）；}
30%{opacity:0；-moz变换：translateY（0px）；}
80%{不透明度：0；}
100%{不透明度：0；}
}
@-webkit关键帧垂直{
0%{不透明度：0；}
5%{不透明度：0；-webkit变换：rotateX（180度）；}
10%{opacity:1；-webkit transform:translateY（0px）；}
25%{opacity:1；-webkit transform:translateY（0px）；}
30%{opacity:0；-webkit transform:translateY（0px）；}
80%{不透明度：0；}
100%{不透明度：0；}
}
@-ms关键帧垂直{
0%{不透明度：0；}
5%{不透明度：0；-ms变换：旋转度（180度）；}
10%{不透明度：1；-ms变换：translateY（0px）；}
25%{不透明度：1；-ms变换：translateY（0px）；}
30%{不透明度：0；-ms变换：translateY（0px）；}
80%{不透明度：0；}
100%{不透明度：0；}
}

1.  您可以使用
标记而不是

因为您正在嵌套
span
。嵌套的
span
也继承
父母的财产

HTML:

2。单击而不是
，您可以使用
标记

因为您正在嵌套
span
。嵌套的
span
也继承
父母的财产

HTML:

2。在CSS中单击，可以使用
选择器仅针对元素的目标。在您的情况下，
.verticalFlip span
的每个实例都将替换为
.verticalFlip>span
。见下文：


/*正文*/
身体{
背景色：#fff；
字体系列：“世纪哥特式”，无衬线；
字体大小：300；
/*空白：预包装*/
}
/*判决*/
.判决{
颜色：#222；
字体大小：20px；
文本对齐：左对齐；
}
.橙色{
颜色：橙色！重要；
}
/*包装纸*/
/*.包装纸{
背景色：#F5；
字体系列：“Raleway”，无衬线；
保证金：100像素自动；
填充：40px 40px；
位置：相对位置；
宽度：70%；
} */
/*垂直翻转*/
垂直翻转{
显示：内联；
文本缩进：8px；
}
.垂直翻转>跨度{
动画：垂直15s线性无限0s；
-ms动画：垂直15s线性无限0s；
-webkit动画：垂直15s线性无限0s；
颜色：#000；
不透明度：0；
溢出：隐藏；
位置：绝对位置；
}
.verticalFlip>span:n子级（2）{
动画延迟：2.5s；
-ms动画延迟：2.5s；
-webkit动画延迟：2.5s；
}
.verticalFlip>span:n子级（3）{
动画延迟：5s；
-ms动画延迟：5s；
-webkit动画延迟：5s；
}
.verticalFlip>span:n个子项（4）{
动画延迟：7.5s；
-ms动画延迟：7.5s；
-webkit动画延迟：7.5s；
}
.verticalFlip>span:n个子项（5）{
动画延迟：10秒；
-毫秒动画延迟：10秒；
-webkit动画延迟：10秒；
}
.verticalFlip>span:n个子项（6）{
动画延迟：12.5s；
-ms动画延迟：12.5s；
-webkit动画延迟：12.5s；
}
/*垂直翻转动画*/
@-moz关键帧垂直{
0%{不透明度：0；}
5%{opacity:0；-moz变换：rotateX（180度）；}
10%{opacity:1；-moz变换：translateY（0px）；}
25%{opacity:1；-moz变换：translateY（0px）；}
30%{opacity:0；-moz变换：translateY（0px）；}
80%{不透明度：0；}
100%{不透明度：0；}
}
@-webkit关键帧垂直{
0%{不透明度：0；}
5%{不透明度：0；-webkit变换：rotateX（180度）；}
10%{opacity:1；-webkit transform:translateY（0px）；}
25%{opacity:1；-webkit transform:translateY（0px）；}
30%{opacity:0；-webkit transform:translateY（0px）；}
80%{不透明度：0；}
100%{不透明度：0；}
}
@-ms关键帧垂直{
0%{不透明度：0；}
5%{不透明度：0；-ms变换：旋转度（180度）；}
10%{不透明度：1；-ms变换：translateY（0px）；}
25%{不透明度：1；-ms变换：translateY（0px）；}
30%{不透明度：0；-ms变换：translateY（0px）；}
80%{不透明度：0；}
100%{不透明度：0；}
}

1.  在CSS中，可以使用
选择器仅针对元素的目标。在您的情况下，
.verticalFlip span
的每个实例都将替换为
.verticalFlip>span
。见下文：


/*正文*/
身体{
背景色：#fff；
字体系列：“世纪哥特式”，无衬线；
字体大小：300；
/*空白：预包装*/
}
/*判决*/
.判决{
颜色：#222；
字体大小：20px；
文本对齐：左对齐；
}
.橙色{
颜色：橙色！重要；
}
/*包装纸*/
/*.包装纸{
背景色：#F5；
字体系列：“Raleway”，无衬线；
保证金：100像素自动；
填充：40px 40px；
位置：相对位置；
宽度：
 <span>2. Click <i class="orange">In CSS, it is possible to only target the direct children of an element using the 
>
 selector. In your case, each instance of 
.verticalFlip span
 would be replaced with 
.verticalFlip > span
. See below:




/*Body*/
body{
	background-color: #fff;
	font-family: 'Century Gothic', sans-serif;
  font-weight:300;
/*   white-space: pre-wrap; */
}
/*Sentence*/
.sentence{
     color: #222;
     font-size: 20px;
     text-align: left;
}

.orange{
  color: orange !important;
}
/*Wrapper*/
/* .wrapper{
    background-color: #f5f5f5;
    font-family: 'Raleway', sans-serif;
    margin: 100px auto;
    padding: 40px 40px;
    position: relative;
    width: 70%;
} */

/*Vertical Flip*/
.verticalFlip{
	display: inline;
	text-indent: 8px;
}
.verticalFlip > span{
	animation: vertical 15s linear infinite 0s;
	-ms-animation: vertical 15s linear infinite 0s;
	-webkit-animation: vertical 15s linear infinite 0s;
	color: #000;
	opacity: 0;
	overflow: hidden;
	position: absolute;
}
.verticalFlip > span:nth-child(2){
	animation-delay: 2.5s;
	-ms-animation-delay: 2.5s;
	-webkit-animation-delay: 2.5s;
}
.verticalFlip > span:nth-child(3){
	animation-delay: 5s;
	-ms-animation-delay: 5s;
	-webkit-animation-delay: 5s;
}
.verticalFlip > span:nth-child(4){
	animation-delay: 7.5s;
	-ms-animation-delay: 7.5s;
	-webkit-animation-delay: 7.5s;
}
.verticalFlip > span:nth-child(5){
	animation-delay: 10s;
	-ms-animation-delay: 10s;
	-webkit-animation-delay: 10s;
}

.verticalFlip > span:nth-child(6){
	animation-delay: 12.5s;
	-ms-animation-delay: 12.5s;
	-webkit-animation-delay: 12.5s;
}

/*Vertical Flip Animation*/
@-moz-keyframes vertical{
	0% { opacity: 0; }
	5% { opacity: 0; -moz-transform: rotateX(180deg); }
	10% { opacity: 1; -moz-transform: translateY(0px); }
	25% { opacity: 1; -moz-transform: translateY(0px); }
	30% { opacity: 0; -moz-transform: translateY(0px); }
	80% { opacity: 0; }
	100% { opacity: 0;}
}
@-webkit-keyframes vertical{
	0% { opacity: 0; }
	5% { opacity: 0; -webkit-transform: rotateX(180deg); }
	10% { opacity: 1; -webkit-transform: translateY(0px); }
	25% { opacity: 1; -webkit-transform: translateY(0px); }
	30% { opacity: 0; -webkit-transform: translateY(0px); }
	80% { opacity: 0; }
	100% { opacity: 0; }
}
@-ms-keyframes vertical{
	0% { opacity: 0; }
	5% { opacity: 0; -ms-transform: rotateX(180deg); }
	10% { opacity: 1; -ms-transform: translateY(0px); }
	25% { opacity: 1; -ms-transform: translateY(0px); }
	30% { opacity: 0; -ms-transform: translateY(0px); }
	80% { opacity: 0; }
	100% { opacity: 0; }
}