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

Answer 2

您的关键帧位于 class 选择器中。尝试将它们带出选择器，你应该得到你的动画

   @-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;

}

CSS3 动画只渲染一帧

CSS3 Animation only renders one frame

html

css

animation

webkit