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 항목 내가"당신이 애니메이션 코드

그것을 끝낼 수 없습니다 변경되지 않습니다

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; 

}