Css Background Changing Color - Gradients

This is my code -webkit-animation: AnimationName 30s ease infinite; -moz-animation: AnimationName 30s ease infinite; animation: AnimationName 30s ease infinite; @-webkit-keyframes

Solution 1:

Your CSS is malformed, the keyframes goes outside of the selector like below. I'm unsure of what colors you want to change to but how keyframes works, you want to describe the state of the element at that moment... otherwise its just like css (also only syntax you need left is the -webkit-, unless you plan on supporting firefox back to v ~30 or so. So what the below says is: at 0 percent, move the background position 50% to the right at halfway through the animation you move down all the way and then at the last moment, move back to the original position it started off at

#navBar {
    font-family: "Century Gothic";
    -webkit-animation: AnimationName 30s ease infinite;
    -moz-animation: AnimationName 30s ease infinite;
    animation: AnimationName 30s ease infinite;
}

@-webkit-keyframes AnimationName {
   0%{background-position:0%50%}
   50%{background-position:100%50%}
   100%{background-position:0%50%}
}
@-moz-keyframes AnimationName {
   0%{background-position:0%50%}
   50%{background-position:100%50%}
   100%{background-position:0%50%}
}
@keyframes AnimationName { 
   0%{background-position:0%50%}
   50%{background-position:100%50%}
  100%{background-position:0%50%}
}

with html

<div id="navBar"></div>

Solution 2:

correct your syntax as @Deamedaor said

use background-color instead of background-position.

to try https://jsfiddle.net/vkbdtc47/

#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}
}