Question

我的CSS就像这样（在this pen的帮助下）：

div[class="heading"]  {
  animation: colorchange 50s; /* animation-name followed by duration in seconds*/
  /* you could also use milliseconds (ms) or something like 2.5s */
  -webkit-animation: colorchange 50s; /* Chrome and Safari */
}

@keyframes colorchange
{
  0%   {background: #e55f5f;}
  25%  {background: yellow;}
  50%  {background: #55CE91;}
  75%  {background: #5fe5e5;}
  100% {background: #ce71ae;} 
}

@-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
{
  0%   {background: #e55f5f;}
  25%  {background: yellow;}
  50%  {background: #55CE91;}
  75%  {background: #5fe5e5;}
  100% {background: #ce71ae;} 
}

<div class="heading">
  <i class="fa fa-user"></i> Some Sample Text Here... 
</div>

除了我希望我的DIV逐渐改变颜色处于循环中之外，一切都非常顺利。在必须显示CSS中的所有颜色后，它会停止。我怎样才能让它不间断？感谢所有回复

Answer 1

您可以将infinite添加到css中的animation：

＆＃13;

div[class="heading"]  {
      animation: colorchange 3s infinite ; /* animation-name followed by duration in seconds*/
         /* you could also use milliseconds (ms) or something like 2.5s */
      -webkit-animation: colorchange 3s infinite ; /* Chrome and Safari */
    }

    @keyframes colorchange
    {
      0%   {background: #e55f5f;}
      25%  {background: yellow;}
      50%  {background: #55CE91;}
      75%  {background: #5fe5e5;}
      100% {background: #ce71ae;} 
    }

    @-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
    {
      0%   {background: #e55f5f;}
      25%  {background: yellow;}
      50%  {background: #55CE91;}
      75%  {background: #5fe5e5;}
      100% {background: #ce71ae;} 
    }

＆＃13;

<div class="heading">
    <i class="fa fa-user"></i> Some Sample Text Here... 
</div>

＆＃13;

如何在CSS中逐渐改变背景变得不间断？

1 个答案: