この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 では「to」状態をレンダリングするだけで、まったくアニメーションしません。Webkit でグラデーションをアニメーション化できますか?