html - CSS3 动画只渲染一帧

Question

我正在尝试为一些文本(这里是图标)的背景设​​置动画。我将背景设置为渐变，然后将透明度应用于文本。之后它只显示渐变作为背景。它停留在初始帧上并且不会改变。你能告诉我为什么它没有动画吗？

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

  }

它只是卡住在您可以在图像中看到的框架上。渐变完全没有变化 ] 1

Answer 1

我检查了你的代码，“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%}
       }