Glow Animation Effect in CSS3/HTML5

html css animation glow
Edoras picture Edoras · Jan 20, 2014 · Viewed 14.3k times · Source

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

Answer

Richik SC picture Richik SC · Jul 15, 2014

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

Related questions

Slide down div on click Pure CSS?

I found this post How to create sliding DIV on click? But all the answers are Jquery methods. Is there any way to create this with PURE CSS? I have a couple other things in mind as well... What can …

Read More
How do I re-trigger a WebKit CSS animation via JavaScript?

So, I've got this -webkit-animation rule: @-webkit-keyframes shake { 0% { left: 0; } 25% { left: 12px; } 50% { left: 0; } 75% { left: -12px; } 100% { left:0; } } And some CSS defining some of the animation rules on my box: #box{ -webkit-animation-duration: .02s; -webkit-animation-iteration-count: 10; -webkit-animation-timing-function: linear; } I can shake the #box like …

Read More
Pulsing Heart CSS animation

I`m working on an animated heart only with CSS. I want it to pulse 2 times, take a small break, and then repeat it again. What I have now: small ==> big ==> small ==> repeat animation What I'm going …

Read More