CSS 动画不响应 span:n 个子项

Question

我希望文本的位置逐字动画化，并带有我控制的轻微延迟。现在它不起作用。

我已经设法使延迟在不透明的情况下工作，我现在已禁用。我主要关心的是立场。最终，我想尝试这两种元素。

<div class="slide-top"><span>Person</span><span> is</span><span> 
a</span><span> designer</span><span> living</span><span> in</span> . 
<span> Brooklyn,</span><span> NY.</span></div>

.css

.slide-top{
font-family: "Raisonne-regular", Icons /*!Persona*/;
font-weight: normal;
font-style: normal;
padding: 0;
margin: 0;
font-size: 6.8rem;
line-height: 1.2;
color: rgba(0, 0, 0, 1);
text-rendering: optimizeLegibility;
-webkit-animation: slide-top 1.25s cubic-bezier(0.250, 0.460, 0.450,         
0.940) both;
animation: slide-top 1.25s cubic-bezier(0.250, 0.460, 0.450, 0.940)         
both;
}
@-webkit-keyframes slide-top {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity:1;
}
100% {
-webkit-transform: translateY(-65px);
transform: translateY(-65px);
opacity:1;
}
}
@keyframes slide-top {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity:1;
}
100% {
-webkit-transform: translateY(-65px);
transform: translateY(-65px);
opacity:1;
}  }

.slide-top span:nth-child(2) { 
animation-delay: .2s; 
}
.slide-top span:nth-child(3) { 
animation-delay: .4s;   
}
.slide-top span:nth-child(4) { 
animation-delay: .6s; 
}
.slide-top span:nth-child(5) { 
animation-delay: .8s; 
}
.slide-top span:nth-child(6) {  
animation-delay: 1.0s; 
}
.slide-top span:nth-child(7) {  
animation-delay: 1.2s; 
}
.slide-top span:nth-child(8) {  
animation-delay: 1.3s; 
}
.slide-top span{
font-family: "Raisonne-regular", Icons /*!Persona*/;
font-weight: normal;
font-style: normal;
 padding: 0;
margin: 0;
font-size: 6.8rem;
line-height: 1.2;
color: rgba(0, 0, 0, 1);
text-rendering: optimizeLegibility;
-webkit-animation: slide-top 1.25s cubic-bezier(0.250, 0.460, 0.450,         
0.940) both;
animation: slide-top 1.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) 
both;
}

https://jsfiddle.net/MayhemII/eL29urpk/1/

我对这一切非常陌生，所以很抱歉标记/格式化任何错误。

谢谢！

Answer 1

尝试将display: inline-block;应用于您的.slide-top span：

https://developer.mozilla.org/en-US/docs/Web/CSS/transform

.slide-top {
  font-family: "Raisonne-regular", Icons/*!Persona*/
  ;
  font-weight: normal;
  font-style: normal;
  padding: 0;
  margin: 0;
  font-size: 6.8rem;
  line-height: 1.2;
  color: rgba(0, 0, 0, 1);
  text-rendering: optimizeLegibility;
  -webkit-animation: slide-top 1.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: slide-top 1.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes slide-top {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(-65px);
    transform: translateY(-65px);
    opacity: 1;
  }
}
@keyframes slide-top {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(-65px);
    transform: translateY(-65px);
    opacity: 1;
  }
}
.slide-top span:nth-child(2) {
  animation-delay: .2s;
}
.slide-top span:nth-child(3) {
  animation-delay: .4s;
}
.slide-top span:nth-child(4) {
  animation-delay: .6s;
}
.slide-top span:nth-child(5) {
  animation-delay: .8s;
}
.slide-top span:nth-child(6) {
  animation-delay: 1.0s;
}
.slide-top span:nth-child(7) {
  animation-delay: 1.2s;
}
.slide-top span:nth-child(8) {
  animation-delay: 1.3s;
}
.slide-top span {
  font-family: "Raisonne-regular", Icons/*!Persona*/
  ;
  font-weight: normal;
  font-style: normal;
  padding: 0 25px 0 0;
  margin: 0;
  font-size: 6.8rem;
  line-height: 1.2;
  color: rgba(0, 0, 0, 1);
  text-rendering: optimizeLegibility;
  -webkit-animation: slide-top 1.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: slide-top 1.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  display: inline-block;
}

<div class="slide-top">
  <span>Person</span>
  <span>is</span>
  <span>a</span>
  <span>designer</span>
  <span>living</span>
  <span>in</span>
  <span>Brooklyn,</span>
  <span>NY.</span>
</div>