CSS 如何使用 -webkit-animation - 外环创建脉冲效果

How to create a pulse effect using -webkit-animation - outward rings

提问by Coughlin

I have found this article:

我找到了这篇文章：

http://www.zurb.com/article/221/css3-animation-will-rock-your-worldon css3 animations.

http://www.zurb.com/article/221/css3-animation-will-rock-your-world关于 css3 动画。

---

---

I am trying to create a similar effect seen on the site above but on personal site at: www.imfrom.me

我试图在上面的网站上创建类似的效果，但在个人网站上：www.imfrom.me

Where I have the state of Maine, there is the red tip box. I want to create a pulse ring by the arrow indicating the location.

在我所在的缅因州，有红色小费箱。我想通过指示位置的箭头创建一个脉冲环。

---

---

UPDATED WITH CODE:

更新代码：

I came up with this below (try it here: http://jsfiddle.net/ftrJn/) as you can tell its close, any thoughts on how I can get it to grow from the center:

我在下面想出了这个（在这里试试：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}
 }

---

---

Thoughts on that above?

上面的想法？

Any ideas on how I can create something like that as if rings animate out and fade away?

关于如何创建类似环动画并逐渐消失的东西的任何想法？

回答by methodofaction

You have a lot of unnecessary keyframes. Don't think of keyframes as individual frames, think of them as "steps" in your animation and the computer fills in the frames between the keyframes.

你有很多不必要的关键帧。不要将关键帧视为单个帧，而是将它们视为动画中的“步骤”，计算机会填充关键帧之间的帧。

Here is a solution that cleans up a lot of code and makes the animation start from the center:

这里有一个解决方案，清理了大量代码，让动画从中心开始：

.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;}
}

You can see it in action here: http://jsfiddle.net/Fy8vD/

你可以在这里看到它的实际效果：http: //jsfiddle.net/Fy8vD/

回答by mariuspearson

Or if you want a ripple pulse effect, you could use this:

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

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

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;}
}