CSS3 - масштабировать только box-shadow с помощью jquery

Question

Я нашел хороший эффект при наведении, и я хотел использовать его для своего проекта, но по-другому, а не как эффект при наведении. Мне нравится эффект 'волны', и я надеюсь, что кто-то может мне помочь:) Div должен запустить этот эффект после определенной задержки.

Номер один

$(document).ready(function() { $('#box').delay(4000).addClass('scale'); });

.scale {
-webkit-animation: spin 0.9s ease-out 75ms;
-moz-animation: spin 0.9s ease-out 75ms;
animation: spin 0.9s ease-out 75ms;}

@-webkit-keyframes spin {
0% {
    opacity: 0.3;
}

40% {
    opacity: 0.5;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5);
    -webkit-transform: scale(0.9);
}

100% {
    box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5);
    -webkit-transform: scale(1.0);
    opacity: 1;
} 

#box {
background: red;
height: 100px;
width: 100px;
position: absolute;
left: 60px;
top: 60px;}

выглядит почти как в примере, но я не получаю волнового эффекта box-shadow. как я получу тень, чтобы распространиться из моего div?

Резюме: 1. Разложите тень от div;

Благодарю.:)

Answer 1

Я не уверен, что это то, что вы намеревались сделать, но попробуйте этот код (в примере № 1):

$('#box').ready(function() {
            test();
        });

function test(){

    $('#box').toggle('scale');

    window.setTimeout(test,4000);
}

Answer 2

Задержка была закодирована неправильно, вот одна с задержкой: http://jsfiddle.net/PVSpE/4/
Javascript должен был быть изменен на:

setTimeout(function(){
    $('#box').addClass('scale');
}, 3000);