我在这里创建了以下动画图标：
有没有人有过设计类似图标的经验，或者有什么建议让这个图标变得更好、更“现实”？
我愿意使用 javascript 来增加动画，以便每条曲线以增加的速度向外移动。
【问题讨论】：
SVG，您可以更好地控制自己在做什么
标签： html animation css css-transitions
状态更新：
Firefox v14.0.1 无法正确呈现此答案（以及消息中的 jsFiddle）。使用 v14.0.1 之前的 Firefox 版本或稳定的 v15.0
查看您的 jsFiddle，我可以看到 Chrome 正在放大原始字体没有调整大小。
我的目标是包含唯一的 CSS 方法来缩放字体大小，但我无法在纯 CSS 中做到这一点。也许其他人可以。
然后我的方法采用了不同的方法。也就是说，我更改了您示例中的所有字体大小，因此它们非常大。然后我把所有的span tags 放在一个包装器div 中，然后让它变得非常小。
最终结果是您的示例的高清版在 Chrome 中运行良好。字体上不再有像素化边缘。
目前，当网页上有 2 个或更多示例时，CSS3 动画 会导致稳定版本 Firefox v13 的速度变慢。 Chrome 没有这个问题，可以显示所有，而没有减速！
这是我的 jsFiddles，其中包括 10 CSS3 样式示例：
jsFiddle 用于 Firefox（仅启用 1 个示例）。
jsFiddle 用于 Chrome（所有 10 个示例均已启用）。
提醒：Chrome jsFiddle 会导致 Firefox 中的 CPU 峰值，因为 Firefox 会阻塞过于密集的 CSS3 动画。下一次 Firefox 更新可能会修复该错误。
编辑：对于不同的缓动风格，您可以使用任何cubic-bezier。有许多在线缓动生成器可以提供预设值或自定义值，例如此生成器HERE。只需选择一个缓动预设并点击左按钮即可查看。然后，如果您喜欢它，只需复制 cubic-bezier 并像这样使用它：
.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);
}
只需将1.600s 持续时间更改为您使用的时间或根据需要进行调整。
单个示例：jsFiddle
【讨论】：
检查这部分动画原理 https://en.wikipedia.org/wiki/12_basic_principles_of_animation#Follow_through_and_overlapping_action
不要一次显示全部，而是重叠各个弧的某些动作。
编辑
例如： http://jsfiddle.net/efortis/KphgD/7/
<span class="pulse1 circ">◠</span>
<span class="pulse2 circ med">◠</span>
<span class="pulse3 circ small">◠</span>
<span class="pulse4 circ tiny">◠</span>
<span class="circ small point">•</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.使用缓动和持续时间来调整它。
【讨论】：