试着让我的文本颜色永远交替闪烁，但为了不使用无限循环，有没有更好的方法？

Question

我试图在文本闪光颜色重复几个单词，我设置了一个无限的for循环来包含代码，但它不工作，因为时间是5秒，谁能告诉我，我的代码有什么问题，以获得我正在寻找的结果？虽然我不认为这是我的html文件的问题，我添加了它，无论如何，我很确定它与动画持续时间有关，提前谢谢

$(function() {
 for (var h = 0; h < 1000; h++) {
    setTimeout(function() {
        $('li.color-0').removeClass('hidden');
    }, 1000);
    setTimeout(function() {
        $('li.color-1').removeClass('hidden');
    }, 1200);
    setTimeout(function() {
        $('li.color-2').removeClass('hidden');
    }, 1400);
    setTimeout(function() {
        $('li.color-3').removeClass('hidden');
    }, 1600);
    setTimeout(function() {
        $('li.color-4').removeClass('hidden');
    }, 1800);
    setTimeout(function() {
        $('li.color-5').removeClass('hidden');
    }, 2000);
    setTimeout(function() {
        $('li.color-6').removeClass('hidden');
    }, 2200);

    setTimeout(function() {
        $('li.color-7').removeClass('hidden');
    }, 2600);
    setTimeout(function() {
        $('li.color-8').removeClass('hidden');
    }, 2800);
    setTimeout(function() {
        $('li.color-9').removeClass('hidden');
    }, 3000);
    setTimeout(function() {
        $('li.color-10').removeClass('hidden');
    }, 3200);
    setTimeout(function() {
        $('li.color-11').removeClass('hidden');
    }, 3400);
    setTimeout(function() {
        $('li.color-12').removeClass('hidden');
    }, 3600);

    setTimeout(function() {
        $('li.color-12').addClass('hidden');
    }, 3800);
    setTimeout(function() {
        $('li.color-11').addClass('hidden');
    }, 4000);
    setTimeout(function() {
        $('li.color-10').addClass('hidden');
    }, 4200);
    setTimeout(function() {
        $('li.color-9').addClass('hidden');
    }, 4400);
    setTimeout(function() {
        $('li.color-8').addClass('hidden');
    }, 4600);
    setTimeout(function() {
        $('li.color-7').addClass('hidden');
    }, 4800);
    setTimeout(function() {
        $('li.color-6').addClass('hidden');
    }, 5000);
    setTimeout(function() {
        $('li.color-5').addClass('hidden');
    }, 5200);
    setTimeout(function() {
        $('li.color-4').addClass('hidden');
    }, 5400);
    setTimeout(function() {
        $('li.color-3').addClass('hidden');
    }, 5600);
    setTimeout(function() {
        $('li.color-2').addClass('hidden');
    }, 5800);
    setTimeout(function() {
        $('li.color-1').addClass('hidden');
    }, 6000);
    setTimeout(function() {
        $('li.color-0').addClass('hidden');
    }, 6200);

  /*  setTimeout(function() {
        $('.fly-in-text').remove();
    }, 6400);
*/

  }

 <div class="wrapper">
     <section class="content">
        <div class="columns">

          <main class="main">
            <div class="container-fluid">
                <ul class="fly-in-text">
                    <li class="color-0">C</li>
                    <li class="color-1">J</li>
                    <li class="color-2">s</li>
                <br>
                    <li class="color-3">P</li>
                    <li class="color-4">i</li>
                    <li class="color-5">z</li>
                    <li class="color-6">z</li>
                    <li class="color-7">a</li>
                <br>
                    <li class="color-8">P</li>
                    <li class="color-9">l</li>
                    <li class="color-10">a</li>
                    <li class="color-11">c</li>
                    <li class="color-12">e</li>
                </ul>
            </div>


@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&family=Pacifico&display=swap');

body{
margin: 0;
} 

.wrapper{
min-height: 100vh;
background: #ccc;
display: flex;
flex-direction: column;
}

.content {
  display: flex;
  flex: 1;
  background: #999;
  color: #000; 
}
.columns{
  display: flex;
  flex:1;
}
.main{
  flex: 1;
  order: 2;
  background: #eee;
}

.sidebar-1 {
  width: 30%;
  background: #000000;
  order: 1;
}

.sidebar-2 {
  width: 30%;
  order: 3;
  background: #000000;  
}

/* Welcome Page Animation */

.fly-in-text {
  list-style: none;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 2; 


 }

.fly-in-text li {
  display: inline-block;
  margin-right: 50px;
  font-family: 'Indie Flower', cursive;
  font-weight: 300;
  font-size: 4em;
  color: #fff;
  opacity: 2;
  transform: translate(380px, 300px);
 }

.fly-in-text li:last-child, .fly-in-text li:last-child {
  margin-right: 0;
 }

.fly-in-text.hidden li {
  opacity: 0;
 }

 /* rainbow color setting */
  @-webkit-keyframes flashycolor {
  0%   {color:#FF4D4D;}
  25%  {color:#FFF94D;}
  50%  {color:#40CFFF;}
  75%  {color:#61FF4D;}
  100% {color:#EF56FC;}
 }

 @keyframes flashycolor {
   0%   {color:#FF4D4D;}
   25%  {color:#FFF94D;}
   50%  {color:#40CFFF;}
   75%  {color:#61FF4D;}
   100% {color:#EF56FC;}
 }

@-webkit-keyframes flashycolor1 {
  0%   {color:#EF56FC;}
  25%  {color:#FF4D4D;}
  50%  {color:#FFF94D;}
  75%  {color:#40CFFF;}
  100% {color:#61FF4D;}
 }

@keyframes flashycolor1 {
  0%   {color:#EF56FC;}
  25%  {color:#FF4D4D;}
  50%  {color:#FFF94D;}
  75%  {color:#40CFFF;}
  100% {color:#61FF4D;}
 }

@-webkit-keyframes flashycolor2 {
  0%   {color:#61FF4D;}
  25%  {color:#EF56FC;}
  50%  {color:#FF4D4D;}
  75%  {color:#FFF94D;}
  100% {color:#40CFFF;}
}

@keyframes flashycolor2 {
  0%   {color:#61FF4D;}
  25%  {color:#EF56FC;}
  50%  {color:#FF4D4D;}
  75%  {color:#FFF94D;}
  100% {color:#40CFFF;}

}

@-webkit-keyframes flashycolor3 {
  0%   {color:#40CFFF;}
  25%  {color:#61FF4D;}
  50%  {color:#EF56FC;}
  75%  {color:#FF4D4D;}
  100% {color:#FFF94D;}
}

@keyframes flashycolor3 {
  0%   {color:#40CFFF;}
  25%  {color:#61FF4D;}
  50%  {color:#EF56FC;}
  75%  {color:#FF4D4D;}
  100% {color:#FFF94D;}
}

@-webkit-keyframes flashycolor4 {
  0%   {color:#FFF94D;}
  25%  {color:#40CFFF;}
  50%  {color:#61FF4D;}
  75%  {color:#EF56FC;}
  100% {color:#FF4D4D;}
}

@keyframes flashycolor4 {
  0%   {color:#FFF94D;}
  25%  {color:#40CFFF;}
  50%  {color:#61FF4D;}
  75%  {color:#EF56FC;}
  100% {color:#FF4D4D;}
}

.color-0, .color-1, .color-10 {
  -webkit-animation-name: flashycolor;
  animation-name: flashycolor;
  -webkit-animation-duration: 20s;
  animation-duration: 2s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
  }

.color-2, .color-11 {
  -webkit-animation-name: flashycolor1;
  animation-name: flashycolor1;
  -webkit-animation-duration: 20s;
  animation-duration: 2s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
 }

 .color-3, .color-12 {
   -webkit-animation-name: flashycolor2;
   animation-name: flashycolor2;
   -webkit-animation-duration: 20s;
   animation-duration: 2s;
   -webkit-animation-timing-function: linear;
   animation-timing-function: linear;
   -webkit-animation-delay: 0.5s;
   animation-delay: 0.5s;
  }

.color-4 {
  -webkit-animation-name: flashycolor3;
  animation-name: flashycolor3;
  -webkit-animation-duration: 20s;
  animation-duration: 2s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
  }

 .color-6 {
  -webkit-animation-name: flashycolor4;
  animation-name: flashycolor4;
  -webkit-animation-duration: 20s;
  animation-duration: 2s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
 }

.color-5 {
  -webkit-animation-name: flashycolor;
  animation-name: flashycolor;
  -webkit-animation-duration: 20s;
  animation-duration: 2s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
 }

.color-7 {
  -webkit-animation-name: flashycolor1;
  animation-name: flashycolor1;
  -webkit-animation-duration: 20s;
  animation-duration: 2s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
 }

.color-8 {
  -webkit-animation-name: flashycolor2;
  animation-name: flashycolor2;
  -webkit-animation-duration: 20s;
  animation-duration: 2s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

  .color-9 {
   -webkit-animation-name: flashycolor3;
   animation-name: flashycolor3;
   -webkit-animation-duration: 20s;
   animation-duration: 2s;
   -webkit-animation-timing-function: linear;
   animation-timing-function: linear;
   -webkit-animation-delay: 0.5s;
   animation-delay: 0.5s;
   }

  .fly-in-text li {
   font-size: 36px;
   transform: translate(0, 250px);
   margin-right: 10px;
  }

Answer 1

您的for循环不是无限的。因为h = 0总是小于2，所以它有0次迭代。