CSS single line animation-CodePudding

I have created an animation for all the lines. I would like to move a single line at the time from left to right on different speeds. ex. line 1 first>1s delay>line 2>1s delay>line 3 and so on.

<div >
      <p >
        <span >line 1</span><br />
        <span >line 2</span><br />
        <span >line 3</span><br />
        <span >line 4</span>
      </p>
    </div>

.hero-video-text-header {
  font-size: 3.5rem;
  font-style: italic;
  text-transform: capitalize;
  font-weight: 900;
  line-height: 9rem;
  letter-spacing: 0.2rem;
  color: var(--black);
  animation: 7s slide-right infinite;
  transform: translateX(-100%);
}

@keyframes slide-right {
  90%
 {
    transform: translate(10rem, 0);
  }
}

 <p >
            <span >line 1</span><br />
            <span >line 2</span><br />
            <span >line 3</span><br />
            <span >line 4</span>
          </p>

Thank you in advance for your help.

CodePudding user response：

with adding animation:delay for each span , you can solve it.

.hero-video-text-header {
  font-size: 3.5rem;
  font-style: italic;
  text-transform: capitalize;
  font-weight: 900;
  line-height: 9rem;
  letter-spacing: 0.2rem;
  color: var(--black);
}
.hero-video-text-header span{
  animation: 7s slide-right infinite;
  transform: translateX(-100%);
  display:block;
}
.hero-video-text-header span:nth-child(1){
  animation-delay:1s;
  color:red;
}
.hero-video-text-header span:nth-child(2){
  animation-delay:2s;
  color:blue;
}
.hero-video-text-header span:nth-child(3){
  animation-delay:3s;
  color:green;
  
}
.hero-video-text-header span:nth-child(4){
  animation-delay:4s;
  color:gold;
}
@keyframes slide-right {
  90%
 {
    transform: translate(10rem, 0);
  }
}

<p >
            <span >line 1</span>
            <span >line 2</span>
            <span >line 3</span>
            <span >line 4</span>
          </p>

CodePudding user response：

I suggest animation-delay, which indicates the delay period before a specified animation starts. Therefore, add

.hero-video-text-2-line {
animation-delay: 1s
}
.hero-video-text-3-line {
animation-delay: 2s
}
.hero-video-text-4-line {
animation-delay: 3s
}

CodePudding user response：

span{
  font-size: 3.5rem;
  font-style: italic;
  text-transform: capitalize;
  font-weight: 900;
  line-height: 9rem;
  letter-spacing: 0.2rem;
  color: var(--black);
  
}
.p1{
  
  animation: 7s slide-right ;
  animation-delay: 0s;
  transform: translateX(-100%);
}
.p2{
  
  animation: 7s slide-right ;
  animation-delay: 7s;
  transform: translateX(-100%);
}
.p3{
  animation: 7s slide-right ;
  animation-delay: 14s;
  transform: translateX(-100%);
}
.p4{
  animation: 7s slide-right ;
  animation-delay: 21s;
  transform: translateX(-100%);
}

@keyframes slide-right {
  90%
 {
    transform: translate(10rem, 0);
  }
}

  <p >
  <p ><span >line 1</span></p><br />
  <p ><span >line 2</span></p><br />
  <p ><span >line 3</span></p><br />
  <p ><span >line 4</span></p>
</p>