Html CSS背景改变颜色-渐变

这是我的密码

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

所以这基本上只是一个颜色变化的背景。 每当我像这样在我的html上运行它

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

我想让背景改变颜色，但这不会发生。我想我必须添加一个背景标签？如果有人能做一个代码笔或者其他什么东西来让它工作，我试着尝试背景标签，但一无所获

基本上我想要一个带代码的动画导航栏（第一部分）

多谢各位

---

如果可能，请只使用CSS和HTML！（也要简化：D）

您的CSS格式不正确，关键帧超出选择器，如下所示。我不确定您要更改为什么颜色，但关键帧是如何工作的，您需要描述元素当时的状态。。。否则它就像css一样（另外，你只需要左边的语法是-webkit-，除非你打算支持firefox回到v~30左右。下面说的是：在0%时，在你一直向下移动的动画中间，将背景位置向右移动50%，然后在最后一刻，移回它开始时的原始位置。）

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

使用html

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

---

按照@Deamedaor的说法更正语法

使用背景色而不是背景位置

试一试

---

这会移动背景？为什么希望背景位置更改颜色？

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