Question

我正在尝试为某些文本（此处为图标）的背景设置动画。我将背景设置为渐变，然后将transperancy应用于文本。之后，它只显示渐变作为背景。它保持在初始帧上并且不会改变。你能告诉我它为什么没有动画吗？

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

  }

它只会冻结在图像中可以看到的帧。 Gradient根本不会更改 ![Gradient background ] 1

Answer 1

我检查了你的代码，＆＃34; section.features .feature-item i＆＃34;的结尾出错了。你不能用动画代码

结束它

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

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

   @-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动画只渲染一帧

2 个答案: