웹킷 애니메이션 방사형 그래디언트?

Question

this Fiddle에서 컨테이너 요소에 "발광 효과"를 적용하려고합니다.

#box { 
    width: 100px; 
    height: 100px; 
    margin: 10px; 
    animation: glow 2s ease-in-out infinite alternate; 
    -webkit-animation: glow 2s ease-in-out infinite alternate; 
} 
@keyframes glow { 
    from {background-image:radial-gradient(circle farthest-side at center, rgba(255,0,0,0) 24px, rgba(255,0,0,1) 24px, rgba(255,0,0,0) 24px);} 
    to {background-image:radial-gradient(circle farthest-side at center, rgba(255,0,0,0) 24px, rgba(255,0,0,1) 24px, rgba(255,0,0,0) 48px);} 
} 
@-webkit-keyframes glow { 
    from {background-image:-webkit-radial-gradient(center,circle farthest-side, rgba(255,0,0,0) 24px, rgba(255,0,0,1) 24px, rgba(255,0,0,0) 24px);} 
    to {background-image:-webkit-radial-gradient(center,circle farthest-side, rgba(255,0,0,0) 24px, rgba(255,0,0,1) 24px, rgba(255,0,0,0) 48px);} 
} 

그것은 IE10에서 작동하지만 Chrome에서 어떤 이유로 "그냥"상태로 렌더링하고 전혀 애니메이션을 적용하지 않습니다. Webkit에서 그라디언트가 움직일 수 있습니까?

Answer 1

추가 검사에서 그래디언트인데도 background-image은 Webkit의 애니메이션 가능 속성이 아닙니다.

이것은 수치 스럽지만 적어도 정적 광선을 대신 보여주기 때문에 뭔가있는 것 같습니다.