css - 背景颜色变化动画

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 添加到您的属性中即可。

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}
 }