html - CSS 动画无法识别嵌套跨度

Question

我有一些 HTML，由 CSS 动画，nth-child 遍历跨度列表。

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

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

<section class="wrapper">
 
 <h2 class="sentence">
    <div class="verticalFlip">
      <span>1. 📖 Write a Blog post </span>
      <span>2. Click <span class="orange">𝜓</span> to open it</span>
      <span>3. ✎ Edit it. </span>
      <span>4. ⇧ Readers upvote best writers</span>
        <span> (✿◠‿◠) 𝟁 </span>
      <span> ☆</span>
    </div>
  </h2>
  
</section>

我在一个 span 中嵌套了一个 span 来给一个字符涂上橙色:

Click <span class="orange">𝜓</span> to open it</span>

Nth-child 一个接一个地触发 span，但彩色 span 会导致计时中断。我可以看到橙色闪光，但句子中没有出现该字符。我可以重新定时第 n 个子动画，但我正在寻找一个 CSS 属性，如“不”、“忽略”、“跳过此跨度”或“识别此跨度是嵌套的”。

https://codepen.io/Teeke/pen/Mmdboe

Answer 1

在 CSS 中，可以只定位 direct children使用 > 选择器的元素。在您的情况下，.verticalFlip span 的每个实例都将替换为 .verticalFlip > span。见下文:

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

<section class="wrapper">
 
 <h2 class="sentence">
    <div class="verticalFlip">
      <span>1. 📖 Write a Blog post </span>
      <span>2. Click <span class="orange">𝜓</span> to open it</span>
      <span>3. ✎ Edit it. </span>
      <span>4. ⇧ Readers upvote best writers</span>
        <span> (✿◠‿◠) 𝟁 </span>
      <span> ☆</span>
    </div>
  </h2>
  
</section>