Question

我想慢慢更改背景颜色并在css文件中使用此代码：

body {
margin-top:60px;
font-family: sans-serif;
animation: colorchange 50s;
-webkit-animation: colorchange 50s;
     }

@keyframes colorchange{
    0%   {background: #FFCCff;}
   25%  {background: #FFFFCC;}
   50%  {background: #CCCC99;}
   75% {background: #CC9999}
   100%{background:#CCCCFF}
 }

  @-webkit-keyframes colorchange  {
     0%   {background:#FFCCFF;}
     25%  {background: #FFFFCC;}
    50%  {background:  #CCCC99;}
    75% {background: #CC9999;}
    100%{background:#CCCCFF;}
 }

但我希望这种改变永远不会停止，我该怎么做？

Answer 1

使用infinite选项：

animation: colorchange 50s infinite;
-webkit-animation: colorchange 50s infinite;

Answer 2

只需将infinite添加到您的媒体资源中即可。

CSS3 animation Property

body {
margin-top:60px;
font-family: sans-serif;
animation: colorchange 50s infinite;
-webkit-animation: colorchange 50s infinite;
     }

@keyframes colorchange{
    0%   {background: #FFCCff;
   25%  {background: #FFFFCC;
   50%  {background: #CCCC99;
   75% {background: #CC9999
   100%{background:#CCCCFF
 }

  @-webkit-keyframes colorchange  {
     0%   {background:#FFCCFF;}
     25%  {background: #FFFFCC;}
    50%  {background:  #CCCC99;}
    75% {background: #CC9999}
    100%{background:#CCCCFF}
 }

colorchange动画为背景

2 个答案: