CSS3アニメーションは1つのフレームのみをレンダリングします

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項目」の終わりとちょうど間違ってあります

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; 

}