CODEWITHSUNDEEP
htmlcsscss-animations
Cress
Cress

Reputation: 432

CSS animation of body background-color not working

I'm trying to animate the background-color of the body but it doesn't work, it changes the color from green to white but I set other colors in between and I don't understand why some examples of doing this work instead.

CSS code:

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

Here's the jsfiddle: http://jsfiddle.net/L69egL59/1/

Upvotes: 0

Views: 2643

Answers (2)

Tanya Sinha
Tanya Sinha

Reputation: 634

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

You can comment like this in css/* your comment */

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157314

Because // is not a valid syntax for commenting in CSS, remove them and your code should work fine.

So remove them, or use /* color here */ to comment out anything in your stylesheet.

@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

Make sure you use semi colons after each property name, even if you declare one property per block.

Upvotes: 2

Related Questions