我在标记中有一些文本，我将其拆分为3行。 我正在运行一个翻译动画，并有文本滑动显示。 一切都很顺利。 我正在尝试调整每行文本的动画时长。 我尝试为每行使用:n子选择器，然后添加
animation-duration: 5s for line 1
animation-duration: 10s for line 2
animation-duration: 15s for line 3
但不管用。 看起来父动画持续时间总是在接管，或者它在使用第一个n个子动画持续时间。 知道为什么吗？
这是我目前得到的代码
null
h3 {
font-family: "Open Sans";
text-align: left;
line-height: normal;
color: #636363;
}
h3 span {
display: block;
}
h3 > span {
overflow: hidden;
}
h3 > span > span {
position: relative;
animation-name: reveal-up;
animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
h3 > span > span:nth-child(1) {
animation-duration: 5s !important;
}
h3 > span > span:nth-child(2) {
animation-duration: 10s !important;
}
h3 > span > span:nth-child(3) {
animation-duration: 15s !important;
}
@keyframes reveal-up {
from { transform: translateY(100%); }
to {transform: translateY(0); }
}<div class="container">
<h3>
<span><span>Zephex® 152a: reducing</span></span>
<span><span>the carbon footprint of</span></span>
<span><span>asthma inhalers</span></span>
</h3>
</div>
null
更改:
h3 > span > span:nth-child(1) {
animation-duration: 5s !important;
}
h3 > span > span:nth-child(2) {
animation-duration: 10s !important;
}
h3 > span > span:nth-child(3) {
animation-duration: 15s !important;
}
至
h3 > span:nth-child(1) > span {
animation-duration: 5s !important;
}
h3 > span:nth-child(2) > span {
animation-duration: 10s !important;
}
h3 > span:nth-child(3) > span {
animation-duration: 15s !important;
}
也许这就是你要找的
null
h3 {
font-family: "Open Sans";
text-align: left;
line-height: normal;
color: #636363;
}
h3 span {
display: block;
}
h3 span {
overflow: hidden;
}
h3 span span {
position: relative;
animation-name: reveal-up;
animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
h3 span span:nth-child(1) {
animation-duration: 5s !important;
}
h3 span span:nth-child(2) {
animation-duration: 10s !important;
}
h3 span span:nth-child(3) {
animation-duration: 15s !important;
}
@keyframes reveal-up {
from { transform: translateY(100%); }
to {transform: translateY(0); }
}<div class="container">
<h3>
<span><span>Zephex® 152a: reducing</span></span>
<span><span>the carbon footprint of</span></span>
<span><span>asthma inhalers</span></span>
</h3>
</div>