html - CSS 背景改变颜色 - 渐变

Question

这是我的代码

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

我想要它让背景改变颜色，但那没有发生。我想我必须添加背景标签？有人可以制作一个 codepen 或其他东西来让它工作吗，我尝试试验背景标签但一无所获。

基本上我想要一个带代码的动画导航栏(第 1 部分)。

非常感谢。

如果可能，请只使用 CSS 和 HTML! (也让它变得简单 :D)

Answer 1

您的 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>