Throbbing Things in CSS
:CSS
.throb { border: 3px solid #555; height: 50px; width: 50px; -webkit-border-radius: 50%; -webkit-animation: pulsate 2s ease-out; -webkit-animation-iteration-count: infinite; opacity: 0; z-index: 999; } @-webkit-keyframes pulsate { 0% { -webkit-transform: scale(1.0, 1.0); opacity: 1.0; } 50% { -webkit-transform: scale(0.75, 0.75); opacity: 0.5; } 100% { -webkit-transform: scale(1.0, 1.0); opacity: 1.0; } }
:HTML
<div class="throb"></div>