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

Question

我正在尝试创建一个类似的效果，该效果在上面的网站上却在个人网站上：www.imfrom.me

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

用代码更新：

我在下面提出了这个建议您可以告诉它结束语，关于如何使它从中心增长的任何想法：

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