CSS3 - scale only the box-shadow with jquery

Question

i've found a nice hover effect and i wanted to use it for my project, but in another way, not as a hover effect. I like the 'wave' effect and i hope someone can help me :) The div should fire that effect after a specific delay.

Number One

$(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;}

looks nearly similar to the example, but i dont get the wave effect of the box-shadow. how i get the shadow to spread away of my div?

summary: 1. spread the box-shadow away of the div;

thanks. :)

Answer 1

I am not sure if it's what you intended to do but give this code a try (in example number 1):

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

function test(){

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

    window.setTimeout(test,4000);
}