Как долго удерживать анимированный текст, используя css?

Question

Привет, ребята, я работаю над решением

Я создал страницу, используя basi c html & css, где я добавил анимацию к тексту.

Прямо сейчас несколько текстовых переключателей со скольжения вниз один за другим. Я хочу удерживать этот анимированный текст в течение более длительного времени

Вот полный код:

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans" />
<style>
.animated-words{
    display: inline-block;
}

.animated-words span:nth-child(2){ 
    -webkit-animation-delay: 1s; 
    -ms-animation-delay: 1s; 
    animation-delay: 1s; 
    color: #000000;
    font-weight:600;
}
.animated-words span:nth-child(3) { 
    -webkit-animation-delay: 2s; 
    -ms-animation-delay: 2s; 
    animation-delay: 2s; 
    color: #000000; 
    font-weight:600;
}


.animated-words span
{
    position: absolute;
    opacity: 0;
    overflow: hidden;
    color: #000000;
    -webkit-animation: animateWord 3s forwards infinite 0s;
    -ms-animation: animateWord 3s forwards infinite 0s;
    animation: animateWord 3s forwards infinite 0s;

    font-weight:600;
}

@-webkit-keyframes animateWord {
    0% { opacity: 0; }
    2% { opacity: 0; -webkit-transform: translateY(-30px); }
    5% { opacity: 1; -webkit-transform: translateY(0px);}
    17% { opacity: 1; -webkit-transform: translateY(0px); }
    20% { opacity: 0; -webkit-transform: translateY(30px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
</style>

<div style="width:320px;height:50px;position:relative;border:0px solid #fff;">
   <img src="starbucks.jpg" style=" position: absolute; top: 5px; left: 20px; /* border: 1px solid #ccc; */ /* -webkit-box-shadow: 2px 6px 28px -5px rgba(0,0,0,0.75); */ -moz-box-shadow: 2px 6px 28px -5px rgba(0,0,0,0.75); /* box-shadow: 2px 6px 28px -5px rgba(0,0,0,0.75); */ width: 40px; height: 40px; border: 0px solid #ccc; border-radius: 0px;">
   <div class="toppr_text animated-words" style="position: absolute;top: 4px;left: 70px;font-family: Open Sans;font-weight: bold; min-width: 135px;"> 
    <span>Let us treat you</span>
    <span>Let us treat you 1</span>
    <span>Let us treat you </span>
   </div>
   <div class="toppr_text" style=" position: absolute; top: 28px; left: 72px; font-family: sans-serif; font-size: 12px; ">4.4</div>
   <div class="toppr_rating"><img src="https://de7yjjf51n4cm.cloudfront.net/banners/star.png" style=" position: absolute; top: 28px; left: 90px; width: 12px; height: 12px; /* border: 1px solid #ccc; */ border-radius: 0px;"></div>
   <div class="toppr_green_text" style=" position: absolute; top: 28px; left: 119px; font-family: sans-serif; font-size: 11px; color: #106E53;">FREE</div>
   <div class="topper_btn_download"><button style="height:27px;background:#058562;border-radius:2px;color:#fff;border-color: #058562;font-size: 11px; font-weight: bold;font-family: Open Sans; border-style:solid; position:absolute; right:10px; top:10px; ">DOWNLOAD</button></div>
</div>

Пожалуйста, помогите

.animated-words {
  display: inline-block;
}

.animated-words span:nth-child(2) {
  -webkit-animation-delay: 1s;
  -ms-animation-delay: 1s;
  animation-delay: 1s;
  color: #000000;
  font-weight: 600;
}

.animated-words span:nth-child(3) {
  -webkit-animation-delay: 2s;
  -ms-animation-delay: 2s;
  animation-delay: 2s;
  color: #000000;
  font-weight: 600;
}

.animated-words span {
  position: absolute;
  opacity: 0;
  overflow: hidden;
  color: #000000;
  -webkit-animation: animateWord 3s forwards infinite 0s;
  -ms-animation: animateWord 3s forwards infinite 0s;
  animation: animateWord 3s forwards infinite 0s;
  font-weight: 600;
}

@-webkit-keyframes animateWord {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 0;
    -webkit-transform: translateY(-30px);
  }
  5% {
    opacity: 1;
    -webkit-transform: translateY(0px);
  }
  17% {
    opacity: 1;
    -webkit-transform: translateY(0px);
  }
  20% {
    opacity: 0;
    -webkit-transform: translateY(30px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

<div style="width:320px;height:50px;position:relative;border:0px solid #fff;">
  <img src="starbucks.jpg" style=" position: absolute; top: 5px; left: 20px; /* border: 1px solid #ccc; */ /* -webkit-box-shadow: 2px 6px 28px -5px rgba(0,0,0,0.75); */ -moz-box-shadow: 2px 6px 28px -5px rgba(0,0,0,0.75); /* box-shadow: 2px 6px 28px -5px rgba(0,0,0,0.75); */ width: 40px; height: 40px; border: 0px solid #ccc; border-radius: 0px;">
  <div class="toppr_text animated-words" style="position: absolute;top: 4px;left: 70px;font-family: Open Sans;font-weight: bold; min-width: 135px;">
    <span>Let us treat you</span>
    <span>Let us treat you 1</span>
    <span>Let us treat you </span>
  </div>
  <div class="toppr_text" style=" position: absolute; top: 28px; left: 72px; font-family: sans-serif; font-size: 12px; ">4.4</div>
  <div class="toppr_rating"><img src="https://de7yjjf51n4cm.cloudfront.net/banners/star.png" style=" position: absolute; top: 28px; left: 90px; width: 12px; height: 12px; /* border: 1px solid #ccc; */ border-radius: 0px;"></div>
  <div class="toppr_green_text" style=" position: absolute; top: 28px; left: 119px; font-family: sans-serif; font-size: 11px; color: #106E53;">FREE</div>
  <div class="topper_btn_download"><button style="height:27px;background:#058562;border-radius:2px;color:#fff;border-color: #058562;font-size: 11px; font-weight: bold;font-family: Open Sans; border-style:solid; position:absolute; right:10px; top:10px; ">DOWNLOAD</button></div>
</div>

Answer 1

Я добавил анимацию и задержку для каждого ребенка, а также увеличил продолжительность анимации.

.animated-words{
    display: inline-block;
}

.animated-words span:nth-child(1){ 
    -webkit-animation-delay: 10s !important; 
    -ms-animation-delay: 10s !important; 
        -webkit-animation: animateWord 20s forwards infinite 0s !important;
    -ms-animation: animateWord 20s forwards infinite 0s !important;
    animation: animateWord 20s forwards infinite 0s !important;
    animation-delay: 10s !important; 
    color: #000000;
    font-weight:600;
}

.animated-words span:nth-child(2){ 
    -webkit-animation-delay: 5s !important; 
    -ms-animation-delay: 5s !important; 
    -webkit-animation: animateWord 20s forwards infinite 0s !important;
    -ms-animation: animateWord 20s forwards infinite 0s !important;
    animation: animateWord 20s forwards infinite 0s !important;
    animation-delay: 5s !important; 
    color: #000000;
    font-weight:600;
}
.animated-words span:nth-child(3) { 
    -webkit-animation-delay: 0s !important; 
    -ms-animation-delay: 0s !important; 
    animation-delay: 0s !important; 
        -webkit-animation: animateWord 20s forwards infinite 0s !important;
    -ms-animation: animateWord 20s forwards infinite 0s !important;
    animation: animateWord 20s forwards infinite 0s !important;
    color: #000000; 
    font-weight:600;
}


.animated-words span
{
    position: absolute;
    opacity: 0;
    overflow: hidden;
    color: #000000;


    font-weight:600;
}

@-webkit-keyframes animateWord {
    0% { opacity: 0; }
    2% { opacity: 0; -webkit-transform: translateY(-30px); }
    5% { opacity: 1; -webkit-transform: translateY(0px);}
    17% { opacity: 1; -webkit-transform: translateY(0px); }
    20% { opacity: 0; -webkit-transform: translateY(30px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans" />
<style>

</style>

<div style="width:320px;height:50px;position:relative;border:0px solid #fff;">
   <img src="starbucks.jpg" style=" position: absolute; top: 5px; left: 20px; /* border: 1px solid #ccc; */ /* -webkit-box-shadow: 2px 6px 28px -5px rgba(0,0,0,0.75); */ -moz-box-shadow: 2px 6px 28px -5px rgba(0,0,0,0.75); /* box-shadow: 2px 6px 28px -5px rgba(0,0,0,0.75); */ width: 40px; height: 40px; border: 0px solid #ccc; border-radius: 0px;">
   <div class="toppr_text animated-words" style="position: absolute;top: 4px;left: 70px;font-family: Open Sans;font-weight: bold; min-width: 135px;"> 
    <span>Let us treat you</span>
    <span>Let us treat you 1</span>
    <span>Let us treat you2 </span>
   </div>
   <div class="toppr_text" style=" position: absolute; top: 28px; left: 72px; font-family: sans-serif; font-size: 12px; ">4.4</div>
   <div class="toppr_rating"><img src="https://de7yjjf51n4cm.cloudfront.net/banners/star.png" style=" position: absolute; top: 28px; left: 90px; width: 12px; height: 12px; /* border: 1px solid #ccc; */ border-radius: 0px;"></div>
   <div class="toppr_green_text" style=" position: absolute; top: 28px; left: 119px; font-family: sans-serif; font-size: 11px; color: #106E53;">FREE</div>
   <div class="topper_btn_download"><button style="height:27px;background:#058562;border-radius:2px;color:#fff;border-color: #058562;font-size: 11px; font-weight: bold;font-family: Open Sans; border-style:solid; position:absolute; right:10px; top:10px; ">DOWNLOAD</button></div>
</div>