Эффект пульсации CSS3

Работает этот эффект только в webkit браузерах, обратите на это внимание сразу. Эффект достигается путем повторения анимации. Что за это эффект вообще и для чего он может пригодиться? Эффект этот сразу ассоциируется с радаром. Также эффект напоминает круги на воде, которые появляются после того, как в нее что-нибудь кинули. Эффект пульсации CSS3 – красивый эффект для картинки, использовать можно эффект для оформления аватара в комментариях на сайте. А можно сделать что-то вроде анимации загрузки на CSS3.

Пример


Код CSS

<style type="text/css"> .album { float:left; position:relative; width:50px; height:50px; background-size: 100% 100%; border-radius:25px; box-shadow:0 1px 1px 0 rgba(0,0,0,0.4), 0 0 4px 1px rgba(0,0,0,0.2), inset 0 1px 1px 0 rgba(255,255,255,0.2), inset 0 2px 4px 1px rgba(255,255,255,0.1); } .pulse { position:absolute; top:0; left:0; width:50px; height:50px; border-radius:25px; background:#dcf48a; -webkit-animation: pulsating 2s ease-in-out; -webkit-animation-iteration-count: infinite; opacity:0.0 z-index:5; } .ringbase { position:absolute; top:0; left:0; width:50px; height:50px; border-radius:25px; opacity:0.0 z-index:10; } .ring1 { box-shadow:0 0 2px 1px #8eb716, inset 0 0 2px 1px #8eb716; -webkit-animation: ring 2s ease-in-out; -webkit-animation-iteration-count: infinite; } .ring2 { box-shadow:0 0 1px 0px #cbe572, inset 0 0 1px 0px #cbe572; -webkit-animation: ring 2s ease-in-out; -webkit-animation-iteration-count: infinite; -webkit-animation-delay: 0.5s; } @-webkit-keyframes pulsating { 0% {opacity: 0.0;} 50% {opacity: 0.2;} 100% {opacity: 0.0;} } @-webkit-keyframes ring { 0% {-webkit-transform: scale(0.4, 0.4); opacity: 0.0;} 50% {opacity: 0.6;} 100% {-webkit-transform: scale(1.1, 1.1); opacity: 0.0;} } </style>

Код HTML

<div class="album" style="background-image:url('http://s43.ucoz.net/a/04/1049.jpg');"> <div class="ringbase ring1"></div> <div class="ringbase ring2"></div> <div class="pulse"></div> </div>

Автор: Noel Tock