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

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/

◠
◠
◠
◠
•

.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. ​