如何创建使用WebKit的动画效果脉冲 - 向外五环

Question

我发现这篇文章：

http://www.zurb.com/article/221/css3-animation-will-rock-your-world对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} 
} 

---

的思考？

任何关于如何创建类似这样的东西的想法，就好像制作出动画并消失一样？

Answer 1

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

这里是清理大量的代码，使从中央的动画开始的解决方案：

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