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

Posted 2023-03-06

【中文标题】如何使用 -webkit-animation - 外环创建脉冲效果

【英文标题】：How to create a pulse effect using -webkit-animation - outward rings

【发布时间】：2011-06-22 02:38:39

【问题描述】：

我找到了这篇文章：

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
 

---

对上面的想法有什么看法？

我有什么想法可以创造出这样的东西，就好像戒指会动画并消失一样？

【参考方案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/

【讨论】：

看起来很棒！感谢您的指点。缓出允许它从中心增长？

不，是“-webkit-transform: scale(x, x)”允许它从中心缩放。它的默认转换点是对象的中心，但如果你想改变它，你可以将“-webkit-transform-origin: top left or 0% 0% in .gps_ring.

这在 Chrome 中对我不起作用，因为某种优化完全停止了动画，因为它开始不可见。将初始比例更改为 0.01, 0.01 解决了问题。

@Nimphious 是的，这在 Chrome 21 中也发生在我身上。我已经更新了答案，谢谢你的提示。

你知道这将不在哪些浏览器中工作吗？

【参考方案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;