CSS-анимация фонового цвета тела не работает

Question

Я пытаюсь анимировать фоновый цвет тела, но он не работает, он меняет цвет от зеленого до белого, но я устанавливаю другие цвета между ними, и я не знаю Не понимаю, почему некоторые примеры этой работы.

код CSS:

body { 
animation: mainscreen 3s linear infinite alternate; 
-webkit-animation: mainscreen 3s linear infinite alternate; 
} 

@-webkit-keyframes mainscreen { 
    0% {background-color: #00F900} //green 
    12.5% {background-color: #3363FF} //blue 
    25% {background-color: #993399} //purple 
    37.5% {background-color: #FF85E0} //pink 
    50% {background-color: #F9E600} //yellow 
    62.5% {background-color: #FF9900} //orange 
    75% {background-color: #FF1919} //red 
    87.5% {background-color: #FDFDFD} //white 
    100% {background-color: #000000} 
} 

@keyframes mainscreen { 
    0% {background-color: #00F900} //green 
    12.5% {background-color: #3363FF} //blue 
    25% {background-color: #993399} //purple 
    37.5% {background-color: #FF85E0} //pink 
    50% {background-color: #F9E600} //yellow 
    62.5% {background-color: #FF9900} //orange 
    75% {background-color: #FF1919} //red 
    87.5% {background-color: #FDFDFD} //white 
    100% {background-color: #000000} 
} 

Вот jsfiddle: http://jsfiddle.net/L69egL59/1/

Answer 1

Поскольку // не является допустимым синтаксисом для комментирования в CSS, удалите их и ваш код должен работать нормально.

Так что удалите их или используйте /* color here */, чтобы прокомментировать что-нибудь в вашей таблице стилей.

@keyframes mainscreen { 
    0% { 
     background-color: #00F900; 
    } 
    12.5% { 
     background-color: #3363FF; 
    } 
    25% { 
     background-color: #993399; 
    } 
    37.5% { 
     background-color: #FF85E0; 
    } 
    50% { 
     background-color: #F9E600; 
    } 
    62.5% { 
     background-color: #FF9900; 
    } 
    75% { 
     background-color: #FF1919; 
    } 
    87.5% { 
     background-color: #FDFDFD; 
    } 
    100% { 
     background-color: #000000; 
    } 
} 

Demo

Убедитесь, что вы используете полу двоеточие после каждого имени свойства, даже если вы объявите одно свойство для каждого блока.

Answer 2

body { 
animation: mainscreen 3s linear infinite alternate; 
-webkit-animation: mainscreen 3s linear infinite alternate; 
} 

@-webkit-keyframes mainscreen { 
0% {background-color: #00F900} /*green*/ 
12.5% {background-color: #3363FF} /*blue*/ 
25% {background-color: #993399} /*purple*/ 
37.5% {background-color: #FF85E0} /*pink*/ 
50% {background-color: #F9E600} /*yellow*/ 
62.5% {background-color: #FF9900} /*orange*/ 
75% {background-color: #FF1919} /*red*/ 
87.5% {background-color: #FDFDFD} /*white*/ 
100% {background-color: #000000} 
} 


@keyframes mainscreen { 
0% {background-color: #00F900} /*green*/ 
12.5% {background-color: #3363FF} /*blue*/ 
25% {background-color: #993399} /*purple*/ 
37.5% {background-color: #FF85E0} /*pink*/ 
50% {background-color: #F9E600} /*yellow*/ 
62.5% {background-color: #FF9900} /*orange*/ 
75% {background-color: #FF1919} /*red*/ 
87.5% {background-color: #FDFDFD} /*white*/ 
100% {background-color: #000000} 
} 

Вы можете прокомментировать, как это в CSS /* your comment */