Add animation* to backgrounds color* in CSS

See more:

CSS

HTML

I wish to animate the background-color* of an element. In this particular way:
_____________________________________
[HTML]
[head]
.example-class {animation: name 2s infinite}
@keyframes example-class {10%{color:black;}100%{color:white;}}
[/head]



[body]
[h1 class="example-class"]example text has no background color or animation.
[/h1]
[/body]
[/HTML]
_____________________________________

How do I make animation* as the background-color* for [h1]?

What I have tried:

[head]
.example-class {animation: name 2s infinite}
@keyframes example-class {10%{color:black;}100%{color:white;}}
.h1-background { background-color: "example-class" }
[/head]