21

I created this image:

Using photoshop, but I had to make around 50 layers manually, and then create a gif out of it. Is there any easier way to automatically create an animated glow similar to this?

Talmid
  • 1,273
  • 14
  • 19

1 Answers1

43

You can use css animation. Here is an example using a vanilla div container, but you can give it a background image:

div {
  width: 200px;
  height: 200px;
  border-radius: 100px;
  background-color: #ccc;
  animation: glow 1s infinite alternate;
}

@keyframes glow {
  from {
    box-shadow: 0 0 10px -10px #aef4af;
  }
  to {
    box-shadow: 0 0 10px 10px #aef4af;
  }
}
<div></div>
Talmid
  • 1,273
  • 14
  • 19
  • Make sure you include Cross browser on animation / box-shadow, right now it will work only on Chrome. – Cam Jan 15 '16 at 23:21
  • 1
    @Cam Works for me without vendor prefixes on IE10+, Firefox, and Chrome. http://caniuse.com lists `keyframes`, `animation`, and `box-shadow` support for these browsers as well. – Talmid Jan 15 '16 at 23:29
  • I +1 your answer btw, but you should still include them for safe practice. – Cam Jan 15 '16 at 23:51