Html CSS3动画仅渲染一帧

我正在尝试设置一些文本（这里是图标）的背景动画。 我将背景设置为渐变，然后对文本应用透明性。 之后，它只显示梯度作为背景。它保持在初始帧上，不会更改。你能告诉我为什么它没有动画吗

section.features .feature-item i {
    font-size: 80px;
    display: block;
    margin-bottom: 15px;

    background: linear-gradient(253deg, #ff002b, #00fff6, #07ffb4, #4307ff, #ff00df);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;

       background-size: 1000% 1000%;

       -webkit-animation: iconBG 3s ease infinite;
       -moz-animation: iconBG 3s ease infinite;
       -o-animation: iconBG 3s ease infinite;
       animation: iconBG 3s ease infinite;

       @-webkit-keyframes iconBG {
           0%{background-position:0% 99%}
           50%{background-position:100% 2%}
           100%{background-position:0% 99%}
       }
       @-moz-keyframes iconBG {
           0%{background-position:0% 99%}
           50%{background-position:100% 2%}
           100%{background-position:0% 99%}
       }
       @-o-keyframes iconBG {
           0%{background-position:0% 99%}
           50%{background-position:100% 2%}
           100%{background-position:0% 99%}
       }
       @keyframes iconBG {
           0%{background-position:0% 99%}
           50%{background-position:100% 2%}
           100%{background-position:0% 99%}
       }

  }

---

它只是冻结在你能在图像中看到的框架上。渐变一点也不改变]

我已经检查了你的代码，只是“section.features.feature item I”的结尾有问题，你不能用动画代码来结束它

section.features .feature-item i  {
    font-size: 80px;
    display: block;
    margin-bottom: 15px;

    background: linear-gradient(253deg, #ff002b, #00fff6, #07ffb4, #4307ff, #ff00df);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;

       background-size: 1000% 1000%;

       -webkit-animation: iconBG 3s ease infinite;
       -moz-animation: iconBG 3s ease infinite;
       -o-animation: iconBG 3s ease infinite;
       animation: iconBG 3s ease infinite;
}
       @-webkit-keyframes iconBG {
           0%{background-position:0% 99%}
           50%{background-position:100% 2%}
           100%{background-position:0% 99%}
       }
       @-moz-keyframes iconBG {
           0%{background-position:0% 99%}
           50%{background-position:100% 2%}
           100%{background-position:0% 99%}
       }
       @-o-keyframes iconBG {
           0%{background-position:0% 99%}
           50%{background-position:100% 2%}
           100%{background-position:0% 99%}
       }
       @keyframes iconBG {
           0%{background-position:0% 99%}
           50%{background-position:100% 2%}
           100%{background-position:0% 99%}
       }

---

我已经检查了你的代码，“section.features.feature item I”的结尾有问题，你不能用动画代码结尾

section.features .feature-item i  {
    font-size: 80px;
    display: block;
    margin-bottom: 15px;

    background: linear-gradient(253deg, #ff002b, #00fff6, #07ffb4, #4307ff, #ff00df);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;

       background-size: 1000% 1000%;

       -webkit-animation: iconBG 3s ease infinite;
       -moz-animation: iconBG 3s ease infinite;
       -o-animation: iconBG 3s ease infinite;
       animation: iconBG 3s ease infinite;
}
       @-webkit-keyframes iconBG {
           0%{background-position:0% 99%}
           50%{background-position:100% 2%}
           100%{background-position:0% 99%}
       }
       @-moz-keyframes iconBG {
           0%{background-position:0% 99%}
           50%{background-position:100% 2%}
           100%{background-position:0% 99%}
       }
       @-o-keyframes iconBG {
           0%{background-position:0% 99%}
           50%{background-position:100% 2%}
           100%{background-position:0% 99%}
       }
       @keyframes iconBG {
           0%{background-position:0% 99%}
           50%{background-position:100% 2%}
           100%{background-position:0% 99%}
       }

---

在类选择器中有关键帧。尝试将它们带到选择器之外，您应该可以获得动画

   @-webkit-keyframes iconBG {
       0%{background-position:0% 99%}
       50%{background-position:100% 2%}
       100%{background-position:0% 99%}
   }
   @-moz-keyframes iconBG {
       0%{background-position:0% 99%}
       50%{background-position:100% 2%}
       100%{background-position:0% 99%}
   }
   @-o-keyframes iconBG {
       0%{background-position:0% 99%}
       50%{background-position:100% 2%}
       100%{background-position:0% 99%}
   }
   @keyframes iconBG {
       0%{background-position:0% 99%}
       50%{background-position:100% 2%}
       100%{background-position:0% 99%}
   }

section.features .feature-item i {
    font-size: 80px;
    display: block;
    margin-bottom: 15px;

    background: linear-gradient(253deg, #ff002b, #00fff6, #07ffb4, #4307ff,    #ff00df);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

   background-size: 1000% 1000%;

   -webkit-animation: iconBG 3s ease infinite;
   -moz-animation: iconBG 3s ease infinite;
   -o-animation: iconBG 3s ease infinite;
   animation: iconBG 3s ease infinite;

---

}

您的关键帧位于类选择器中。尝试将它们带到选择器之外，您应该可以获得动画

   @-webkit-keyframes iconBG {
       0%{background-position:0% 99%}
       50%{background-position:100% 2%}
       100%{background-position:0% 99%}
   }
   @-moz-keyframes iconBG {
       0%{background-position:0% 99%}
       50%{background-position:100% 2%}
       100%{background-position:0% 99%}
   }
   @-o-keyframes iconBG {
       0%{background-position:0% 99%}
       50%{background-position:100% 2%}
       100%{background-position:0% 99%}
   }
   @keyframes iconBG {
       0%{background-position:0% 99%}
       50%{background-position:100% 2%}
       100%{background-position:0% 99%}
   }

section.features .feature-item i {
    font-size: 80px;
    display: block;
    margin-bottom: 15px;

    background: linear-gradient(253deg, #ff002b, #00fff6, #07ffb4, #4307ff,    #ff00df);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

   background-size: 1000% 1000%;

   -webkit-animation: iconBG 3s ease infinite;
   -moz-animation: iconBG 3s ease infinite;
   -o-animation: iconBG 3s ease infinite;
   animation: iconBG 3s ease infinite;

---

}

不客气，如果您将来需要，顺便说一句JSFIDLE：不客气，如果您将来需要，顺便说一句JSFIDLE：