Question

我使用以下代码使用css动画更改元素的背景颜色。有没有办法改变它，以使其连续循环？

    #circle {
      animation: colorchange 10s;
      -webkit-animation: colorchange 10s;
    }

    @keyframes colorchange
    {
      0%   {background: red;}
      25%  {background: yellow;}
      50%  {background: blue;}
      75%  {background: green;}
      100% {background: red;}
    }

    @-webkit-keyframes colorchange
    {
      0%   {background: red;}
      25%  {background: yellow;}
      50%  {background: blue;}
      75%  {background: green;}
      100% {background: red;}
    }

Answer 1

您必须使用：

animation-iteration-count: infinite;

Answer 2

如果你看一下animation documentation，你可以指出迭代次数。

使用属性animation-iteration-count或animation定义。

＆＃13;

#circle {
  width:100px;
  height:100px;
  animation: colorchange 10s infinite;
  -webkit-animation: colorchange 10s infinite;
}

@keyframes colorchange
{
  0%   {background: red;}
  25%  {background: yellow;}
  50%  {background: blue;}
  75%  {background: green;}
  100% {background: red;}
}

@-webkit-keyframes colorchange
{
  0%   {background: red;}
  25%  {background: yellow;}
  50%  {background: blue;}
  75%  {background: green;}
  100% {background: red;}
}

＆＃13;

<div id="circle"></div>

＆＃13;

Answer 3

您应该将animation-iteration-count: infinite;添加到#circle div的css块中，如下所示：

#circle {
    animation: colorchange 10s;
    -webkit-animation: colorchange 10s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

animation-iteration-count属性指定应播放动画的次数。

为css动画创建一个循环

3 个答案: