我发现这篇文章：
http://www.zurb.com/article/221/css3-animation-will-rock-your-world on css3动画。
我试图创建一个类似的效果看到上面的网站，但在个人网站：www.imfrom.me
在那里我有缅因州，有一个红色的提示框。我想通过指示位置的箭头创建一个脉冲环。
更新代码：
我想出了这个下面(试试这里：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}
}
以上的想法？
任何想法，如何我可以创建类似的东西，好像环生气和退色？
解决方法
你有很多不必要的关键帧。不要将关键帧视为单个帧，将它们视为动画中的“步骤”，计算机会填充关键帧之间的帧。
.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/
