Question

In this Fiddle, I’m trying to get a “glow” effect in my container element.

#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);}
}

It works in IE10, but for some reason in Chrome it just renders the “to” state and does not animate at all. Are gradients animate-able in Webkit?

Answer 1

On further inspection, it appears that background-image is not an animate-able property in Webkit, even if it’s a gradient.

This is a shame, but at least it shows a static glow instead, so I guess that’s something.