用于创建纯HTML5 + CSS3动画片“声纳波”图标最佳方法。(Best method for c

我已经创建了下面的动画图标的位置：

http://jsfiddle.net/KphgD/9

没有人有任何经验的设计相当的图标或有使这个更好的，更加“现实”有什么建议？

我将开放给使用javascript或许让每个曲线的速度越来越快向外移动，以增加动画。

Answer 1:

状态更新：

火狐v14.0.1无法正确渲染这个答案（和的jsfiddle在消息）。 使用Firefox之前的版本v14.0.1或稳定V15.0

看着你的jsfiddle，我可以看到Chrome正在扩大原来的字体而不调整其大小。

我的目标是包括CSS只缩放字体大小的方法，但我不能这样做，在纯CSS。也许别人可以。

我的方法则采取了不同的方法。这就是说，我改变了所有的字体大小在你的榜样，使他们真的很大。然后我把所有的span tags在包装div并作出非常小。

最终的结果就是你们的榜样，在Chrome浏览器工作良好的HD版本 。没有更多的像素化的边缘上看到的字体。

目前，CSS3动画引起的稳定版本的Firefox V13放缓时，2分或更多的例子是在网页上。 Chrome不存在这个问题，可以与没有放缓显示所有的人！

这里是我的jsFiddles包括10 CSS3风格的例子：

的jsfiddle为Firefox（仅1例启用）。

的jsfiddle为浏览器（所有10个实施例是使能）。

提醒：镀铬的jsfiddle会导致CPU钉在Firefox火狐以来对CSS3动画过于密集的扼流圈。或许未来的Firefox更新修复这个bug。

编辑：对于不同的味道放松 ，你可以使用任何立方贝塞尔曲线 。有迹象表明，将提供一个预设的或定制的值，比如这台发电机许多在线宽松发电机 这里。只需选择一个宽松的预设，然后按下左键查看。然后，如果你喜欢它，只拷贝立方贝塞尔和使用它像这样：

.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

Answer 2:

检查的动画原理这部分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">&#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; }

与宽松和持续时间来调整它PD播放。

文章来源: Best method for creating a pure HTML5 + CSS3 animated “sonar wave” icon.