Ping animation 3

by rulokc

HTML

<div class="container">
    <div class="circle"></div>
</div>

CSS

.container {
    background-color: #008;
    width: 300px;
    height: 200px;
    border-radius: 100%;
    display: flex;
}
.circle {
    width: 0;
    height: 0;
    box-shadow: 0 0 10px #fff;
    border-radius: 100%;
    margin: auto;
    -webkit-animation: grow 1s linear infinite;
}
@-webkit-keyframes grow {
    from {
        -webkit-transform: rotate(0deg); 
        width: 0;
        height: 0;
    }
    to {
        -webkit-transform: rotate(360deg); 
        width: 100%;
        height: 100%;
    }
}