CSS 单行动画

Question

我已经为所有台词制作了动画。我想同时以不同的速度从左到右移动一条线。前任。第1行先>1s延迟>第2行>1s延迟>第3行等等。

<div class="hero-video-text">
      <p class="hero-video-text-header">
        <span class="hero-video-text-1-line">line 1</span><br />
        <span class="hero-video-text-2-line">line 2</span><br />
        <span class="hero-video-text-3-line">line 3</span><br />
        <span class="hero-video-text-4-line">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 class="hero-video-text-header">
            <span class="hero-video-text-1-line">line 1</span><br />
            <span class="hero-video-text-2-line">line 2</span><br />
            <span class="hero-video-text-3-line">line 3</span><br />
            <span class="hero-video-text-4-line">line 4</span>
          </p>

Thank you in advance for your help.

Answer 1

我建议animation-delay，表示指定动画开始前的延迟时间。因此，添加

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

Answer 2

每个 span 添加 animation:delay 即可解决。

.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 class="hero-video-text-header">
            <span class="hero-video-text-1-line">line 1</span>
            <span class="hero-video-text-2-line">line 2</span>
            <span class="hero-video-text-3-line">line 3</span>
            <span class="hero-video-text-4-line">line 4</span>
          </p>

Answer 3

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 class="hero-video-text-header">
  <p class="p1"><span class="hero-video-text-1-line">line 1</span></p><br />
  <p class="p2"><span class="hero-video-text-2-line">line 2</span></p><br />
  <p class="p3"><span class="hero-video-text-3-line">line 3</span></p><br />
  <p class="p4"><span class="hero-video-text-4-line">line 4</span></p>
</p>

CSS 单行动画

CSS single line animation

html

css

frontend