change background color once after few seconds

Question

Is it possible to change the background color of <p> element after few seconds ( 10 to 20 seconds ) using css fiddle? I don't want to use js.

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

Malita

See this example using animations and keyframes. – Displease

Answer 1

Using a CSS animation, you could just jump from 99.9% to 100%. Just set the initial background color (#E1FEE0) within 99.9%, then the final background color within 100%. If you want the color to transition, just increase the gap 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;
    }
}

Other vendor prefixes omitted for simplicity and brevity.

Sidnee

@Beginner Only the animation properties.. not the keyframes. See this example. – Sidnee

@Beginner: No. If you must, you can put it inside a <style></style>. – Culbreth

Answer 2

Actually You can. You should use CSS animation to achieve this. Here's example of CSS declaration:

@-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+ */
}

Try this on JSFiddle.

For more reading, here's the link about CSS animations.

Gooey