css animation not responding to span:nth-child

Question

I want the text's position to animate, word by word, with a slight delay that I control. Right now it's not working.

I've managed to make the delay work with opacity, which I've disabled for now. My main concern is the position. Eventually I'd like to experiment with both elements.

<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/

I'm super new to all of this, so apologies for labelling/formatting anything wrong.

Thanks!

please have proper formatting for easy understanding – kakabali Jan 19 '19 at 17:35 — kakabali, Jan 19 '19 at 17:35
Sure, what do you mean by that? – MayhemII Jan 19 '19 at 17:44 — MayhemII, Jan 19 '19 at 17:44
see here https://stackoverflow.com/help/formatting – kakabali Jan 19 '19 at 17:46 — kakabali, Jan 19 '19 at 17:46

score 0 · Accepted Answer · answered Jan 19 '19 at 17:59

Try to apply display: inline-block; to your .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>

css animation not responding to span:nth-child

1 Answers1