Css3的animation属性实现雷达扩散效果

最终实现效果网址http://www.east.com.cn/（在网页底部可以看到）

html代码

<section id="map">
    <div>
        <a href="" class="circle"></a>
        <a href="" class="ripple p1"></a>
        <a href="" class="ripple p2"></a>
        <a href="" class="ripple p3"></a>
    </div>

</section>

css代码

#map {
    width: 100%;
    height: 270px;
    position: relative;
    height: 450px;
    overflow: hidden;
    margin-top: 20px;
    background: url(../../image/map.png) center center no-repeat;
}
#map div {
    width: 1200px;
    margin: 0 auto;
    position: relative;
}
#map div .circle {
    position: absolute;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #7abefd;
    top: 153px;
    left: 622px;
    z-index: 12;
    margin-bottom: 0px;
}
#map div a {
    display: block;
}
#map div .ripple {
    border-radius: 50%;
    background-clip: padding-box;
    background: transparent;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    position: absolute;
    left: 558px;
    top: 88px;
    z-index: 9;
    margin-bottom: 0px;
}
#map div .p1:after,
#map div .p2:after,
#map div .p3:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    border: 2px solid #75abfa;
    opacity: 0;
    background-color: rgba(160, 195, 244, .5);
}
#map div .p1:after{
    -webkit-animation: ripple 4.5s ease-out 225ms infinite;
    animation: ripple 4.5s ease-out 225ms infinite;
}
#map div .p2:after{
    -webkit-animation: ripple 4.5s ease-out .9s infinite;
    animation: ripple 4.5s ease-out .9s infinite;
}
#map div .p3:after{
    -webkit-animation: ripple 4.5s ease-out 1.8s infinite;
    animation: ripple 4.5s ease-out 5.8s infinite;
}
@-webkit-keyframes ripple {
    0% {
        opacity: 0;
        -webkit-transform: scale(.1)
    }
    5% {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: scale(1)
    }
}
@keyframes ripple {
    0% {
        opacity: 0;
        -webkit-transform: scale(.1);
        transform: scale(.1)
    }
    5% {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}