JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navBar">
    <p>&nbsp;</p>
    background-<b>color</b>
    <p>&nbsp;</p>

</div>

CSS

#navBar {
    font-family: "Century Gothic";
    -webkit-animation: AnimationName 30s ease infinite;
    -moz-animation: AnimationName 30s ease infinite;
    animation: AnimationName 30s ease infinite;
    background-color: #fff;
}
@-webkit-keyframes AnimationName {
   0%{background-color: #fff}
   50%{background-color:#f00}
   100%{background-color: #fff}
}
@-moz-keyframes AnimationName {
   0%{background-color: #fff}
   50%{background-color:#f00}
   100%{background-color: #fff}
}
@keyframes AnimationName { 
   0%{background-color: #fff}
   50%{background-color:#f00}
  100%{background-color: #fff}
}