CSS3 Beacon Effect

Quick and dirty CSS3 "beacon" effect

HTML

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

CSS

.container {
    position: relative;
    margin: 10px 110px;
}
.container .beacon {
    border: 3px solid rgb(123, 66, 84);
    border-radius: 3px;
    -webkit-border-radius: 3px;
    height: 0;
    left: 30px;
    position: absolute;
    top: 28px;
    width: 0;
    -webkit-animation-name: beacon;
    -webkit-animation-delay: 1s;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes beacon {
    0% {
        border-color: rgba(163, 163, 163, 1);
        border-radius: 3px;
        -webkit-border-radius: 3px;
        padding: 0;
    }
    100% {
        border-color: rgba(163, 163, 163, 0);
        border-radius: 25px;
        -webkit-border-radius: 25px;
        left: 9px;
        padding: 21px;
        top: 7px;
    }
}