JohnAndrews JohnAndrews - 28 days ago 17
CSS Question

How to make the background color animate of an element?

I am trying to iterate over colours (or background images), but it does not seem to work. I tried the following, but it only iterates one time and does not continue.

.landing-background {
background-color: red;
-webkit-animation-name: example; /* Chrome, Safari, Opera */
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}


/* Chrome, Safari, Opera */
@-webkit-keyframes example {
0% {background-color:red; }
25% {background-color:yellow; }
50% {background-color:blue; }
75% {background-color:green; }
100% {background-color:red; }
}

/* Standard syntax */
@keyframes example {
0% {background-color:red; }
25% {background-color:yellow; }
50% {background-color:blue; }
75% {background-color:green; }
100% {background-color:red; }
}

Tom Tom
Answer

You are probably using another browser than Internet Explorer. Try adding:

-webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */

Edit:
Visit Can I Use: Css-Animation to see which browsers support css animations (prefixed). Every browser nowadays supports this without prefix, though not everybody may have updated their browser. It's probably safe to remove the prefixes entirely mid-2017.