如何使用-webkit-animation向外环创build脉冲效果

我find了这篇文章：

http://www.zurb.com/article/221/css3-animation-will-rock-your-world css3animation。

---

我正试图创build一个类似的效果在上面的网站上看到，但在个人网站上：www.imfrom.me

我有缅因州的地方，有红色的提示框。 我想通过指示位置的箭头创build一个脉冲环。

---

用代码更新：

我想出了下面这个（在这里试试吧： http : //jsfiddle.net/ftrJn/ ），你可以告诉它的密切关系，以及如何让它从中心发展的任何想法：

.gps_ring { border: 3px solid #999; -webkit-border-radius: 30px; height: 18px; width: 18px; position: absolute; left:20px; top:214px; } .gps_ring{ -webkit-animation-name: pulsate; -webkit-animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite } @-webkit-keyframes pulsate { 0% { width:1px;height: 1px; opacity: 0.0} 10% { width:3px;height: 3px; opacity: .20} 20% { width:5px;height: 5px; opacity: .40 } 30% { width:7px;height: 7px; opacity: .60 } 40% { width:9px;height: 9px; opacity: .80 } 50% { width:11px;height: 11px; opacity: 1.0} 60% { width:13px;height: 13px; opacity: .80} 70% { width:15px;height: 15px; opacity: .60} 80% { width:17px;height: 17px; opacity: .40} 90% { width:19px;height: 19px; opacity: .20} 100% { width:21px;height: 21px; opacity: 0.0} } 

---

以上的想法？

任何关于如何创造出类似这样的东西的想法，就好像是animation一样消失了？

Answer 1

你有很多不必要的关键帧。 不要将关键帧视为单个帧，将其视为animation中的“步骤”，并且计算机将填充关键帧之间的帧。

这是一个清理大量代码并使animation从中心开始的解决scheme：

 .gps_ring { border: 3px solid #999; -webkit-border-radius: 30px; height: 18px; width: 18px; position: absolute; left:20px; top:214px; -webkit-animation: pulsate 1s ease-out; -webkit-animation-iteration-count: infinite; opacity: 0.0 } @-webkit-keyframes pulsate { 0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;} 50% {opacity: 1.0;} 100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;} } 

你可以在这里看到它： http : //jsfiddle.net/Fy8vD/

Answer 2

或者如果你想要一个波纹脉冲效果，你可以使用这个：

http://jsfiddle.net/Fy8vD/3041/

 .gps_ring { border: 2px solid #fff; -webkit-border-radius: 50%; height: 18px; width: 18px; position: absolute; left:20px; top:214px; -webkit-animation: pulsate 1s ease-out; -webkit-animation-iteration-count: infinite; opacity: 0.0; } .gps_ring:before { content:""; display:block; border: 2px solid #fff; -webkit-border-radius: 50%; height: 30px; width: 30px; position: absolute; left:-8px; top:-8px; -webkit-animation: pulsate 1s ease-out; -webkit-animation-iteration-count: infinite; -webkit-animation-delay: 0.1s; opacity: 0.0; } .gps_ring:after { content:""; display:block; border:2px solid #fff; -webkit-border-radius: 50%; height: 50px; width: 50px; position: absolute; left:-18px; top:-18px; -webkit-animation: pulsate 1s ease-out; -webkit-animation-iteration-count: infinite; -webkit-animation-delay: 0.2s; opacity: 0.0; } @-webkit-keyframes pulsate { 0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;} 50% {opacity: 1.0;} 100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;} }