colorchange動畫背景

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

Answer 2

使用infinite選項：

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