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?

Solution 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

Solution 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/

Comments

[Edoras]

I know this, but this is unfortunately not enough to me, I need to see there was some way at least the minimum animations or transitions that cause visible feeling of animation.

[Richik SC]

Dear @Edoras, Is this a similar question?stackoverflow.com/questions/9540540/…

[Edoras]

I dont see there any animation, so I thing it isnt :)

[Richik SC]

@Edoras I found out you can actually pulse the box shadow using keyframes. check my other answer

[Edoras]

It's good, but actually I did not looking for an animation that will be 'pulsing' you know, but anyway it's really cool, and I thank you for it, so I will mark your post as accepted answer :)

[Edoras]

It would be ideal to have like two textures that are against each other to circulate around the box, and in turn will change the transparency.

[Richik SC]

@Edoras You can practically do anything with keyframes. You could even do some research online and try to do the circulating thing. maby this could be it: http://jsfiddle.net/X8Frp/13/