Change background color once every few seconds

Question

Is it possible to change the background color of an element <p>in a few seconds (from 10 to 20 seconds) using a css fiddle ? I do not want to use js.

<p style="background:#E1FEE0;">Human</p>

Answer 1

Using CSS animations, you can simply go from 99.9%to 100%. Just set the initial background color ( #E1FEE0) to within 99.9%, and then the final background color to 100%. If you need to switch the color, just increase the space, and use something like 80%for example .

Example here

p {
    display: inline;
    animation: background-fade 10s forwards;
}

@keyframes background-fade {
    99.9% {
        background:#E1FEE0;
    }
    100% {
        background:#000;
    }
}

.

Answer 2

. CSS. CSS:

@-webkit-keyframes change-color {
  0%   { background-color: red; }
  100% { background-color: green; }
}
@-moz-keyframes change-color {
  0%   { background-color: red; }
  100% { background-color: green; }
}
@-o-keyframes change-color {
  0%   { background-color: red; }
  100% { background-color: green; }
}
@keyframes change-color {
  0%   { background-color: red; }
  100% { background-color: green; }
}

.animated {
  -webkit-animation: change-color 2s infinite; /* Safari 4+ */
  -moz-animation:    change-color 2s infinite; /* Fx 5+ */
  -o-animation:      change-color 2s infinite; /* Opera 12+ */
  animation:         change-color 2s infinite; /* IE 10+ */
}

JSFiddle.

CSS.