2

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?

Glow Animation GIF

Edoras
  • 319
  • 2
  • 4
  • 14
  • Theoretically you could achieve this with transitions and gradients. Practically - no. – Niels Keurentjes Jan 20 '14 at 18:00
  • Better off just using a gif if you can. Why do you want to use just HTML? You'll get the same effect if you make that fancy glowbackground a gif and make the text in HTML. – Alexander Lozada Jan 20 '14 at 18:02
  • 1
    If JavaScript is an option, Canvas can do animated FX very well. – Peter MacMurchy Jan 20 '14 at 18:09
  • Glow effect may not be exactly the same as in the picture above. I do not use GIF because I need to glow showing through unless used more PNG files and somehow using CSS3 set in motion, it is somehow possible? – Edoras Jan 20 '14 at 18:13
  • @PeterMacMurchy can you give me please some example? Im not JS expert :-/ – Edoras Jan 20 '14 at 18:14
  • 1
    I was thinking of this sort of thing: http://stackoverflow.com/questions/5067368/html5-canvas-create-outer-glow-effect-of-shape but you could create a canvas behind (and larger than) a DIV or IMG if you wanted to apply the effect to an existing DOM element – Peter MacMurchy Jan 20 '14 at 18:18

2 Answers2

13

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

Richik SC
  • 864
  • 1
  • 8
  • 18
  • 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 Jul 16 '14 at 10:52
  • 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. – Edoras Jul 16 '14 at 10:54
  • 2
    @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/](http://jsfiddle.net/X8Frp/13/) – Richik SC Jul 16 '14 at 17:31
1

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/

Richik SC
  • 864
  • 1
  • 8
  • 18
  • 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. – Edoras Jan 20 '14 at 18:17
  • Dear @Edoras, Is this a similar question?http://stackoverflow.com/questions/9540540/add-box-shadow-with-transition-effect – Richik SC Jan 20 '14 at 18:21
  • I dont see there any animation, so I thing it isnt :) – Edoras Jan 20 '14 at 18:28
  • @Edoras I found out you can actually pulse the box shadow using keyframes. check my other answer – Richik SC Jul 14 '14 at 22:37