Best method for creating a pure HTML5 + CSS3 animated “sonar wave” icon.

Question

I\'ve created the following animated icon here:

http://jsfiddle.net/KphgD/9

Does anyone have any experience designing a comparable icon or have any suggestio

Answer 1

Status Update:

Firefox v14.0.1 fails to render this Answer (and jsFiddle's in messages) correctly. Use Firefox version prior to v14.0.1 or stable v15.0

---

Looking at your jsFiddle, I can see that Chrome is enlarging the original font without resizing it.

My goal was to include CSS only method to scale the Font Size, but I could not do that in pure CSS. Perhaps somebody else can.

My method then took a different approach. That said, I changed all the font sizes in your example so they are really large. Then I placed all the span tags in a wrapper div and made that really small.

The end result is a HD Version of your example that works well in Chrome. No more pixelated edges to see on the font.

Currently, the CSS3 Animations causes slowdown in stable build Firefox v13 when 2 or more examples are on the webpage. Chrome does not have this problem and can display all of them with no slowdown!

---

Here are my jsFiddles that includes 10 CSS3 style examples:

jsFiddle for Firefox (just 1 example is enabled).

jsFiddle for Chrome (all 10 examples are enabled).

Reminder: The Chrome jsFiddle will cause CPU Spike in Firefox since Firefox chokes on CSS3 Animations that are too intensive. Perchance next Firefox update fixes that bug.

---

Edit: For a different easing flavor, you can use any cubic-bezier. There are many Online Easing Generators that will supply a preset or custom made value such as this generator HERE. Just select an easing preset and hit the Left Button to view it. Then if you like it, copy only the cubic-bezier and use it like so:

.pulse{
    -webkit-animation: pulsate 1.600s infinite cubic-bezier(0.190, 1.000, 0.220, 1.000);
    -moz-animation: pulsate 1.600s infinite cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

Just change the 1.600s duration to what you your using or adjust as required.
Single Example: jsFiddle

Answer 2

Check this part of the animation principles https://en.wikipedia.org/wiki/12_basic_principles_of_animation#Follow_through_and_overlapping_action

Instead of displaying all at once, overlap some action of the individual arcs.

Edit

For example: http://jsfiddle.net/efortis/KphgD/7/

<span class="pulse1 circ">&#9696;</span>
<span class="pulse2 circ med">&#9696;</span>
<span class="pulse3 circ small">&#9696;</span>
<span class="pulse4 circ tiny">&#9696;</span>
<span class="circ small point">&#8226;</span>

.pulse1 { -webkit-animation: pulsate 1.1s infinite ease-out; }
.pulse2 { -webkit-animation: pulsate .9s infinite ease-out; }
.pulse3 { -webkit-animation: pulsate .7s infinite ease-out; }
.pulse4 { -webkit-animation: pulsate .2s infinite ease-out; }

P.D. Play with the easing and duration to tune it. ​