Glow Animation Effect in CSS3/HTML5

Question

Is there any possibility to create a similar animation glow effect on the buttons and other objects on the web without using Flash or GIF?

Answer 1

Use @keyframes.

You can make a pulsing animation like this.

#box {
  width:80px;
  height:80px;
  background:gray;
  animation:pulse 0.5s infinite alternate;
}

@keyframes pulse {
  from { box-shadow:0px 0px 10px 3px #0066cc; }
  to { box-shadow:0px 0px 20px 5px #0066cc; }
}

Note @keyframes should be prefixed like this: @-webkit-keyframes. also the animation property should be prefixed

Answer 2

Add a box-shadow to your CSS and make it a bright color. It won't animate, but it would kind of have a glowing effect. fiddle: http://jsfiddle.net/5N2ra/

also, see http://css-tricks.com/snippets/css/css-box-shadow/