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. :)

aww, the [**Example**](http://tympanus.net/Development/IconHoverEffects/#set-8) — sammy, Jun 23 '13 at 11:43

score 0 · Accepted Answer · answered Jun 23 '13 at 12:08

0

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);
}

answered Jun 23 '13 at 12:08

Beatles1692

5,214
34
65

thx for your answer, but it isn't what i want. :) [here](http://jsfiddle.net/eurydice/ccxt7/) i dont want to toggle it and the box shadow doesn't appears. B/ – sammy Jun 23 '13 at 12:14
[the example how i want it](http://tympanus.net/Development/IconHoverEffects/#set-8) not as a hover effect, but the function fire the effect after 4 sec. – sammy Jun 23 '13 at 12:17
aw, im so stupid. i think i have the solution. i will try it now and post the new code. – sammy Jun 23 '13 at 12:42
[here](http://jsfiddle.net/eurydice/PVSpE/2/) - not the best, but its something :D – sammy Jun 23 '13 at 17:16
Maybe you are looking for animation-iteration-count or in case of safari and chrome browsers -webkit-iteration-count that let's specify the number of loops of an animation and we can set it to infinite to make it to loop forever. [here](http://stackoverflow.com/questions/13309673/css3-transitions-how-to-set-this-code-to-play-in-loop) you can find an example. – Beatles1692 Jun 24 '13 at 06:43

score 0 · Answer 2 · answered Jun 24 '13 at 05:51

0

The delay was coded incorrectly, here is one with the delay: http://jsfiddle.net/PVSpE/4/
The javascript had to be changed to:

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

answered Jun 24 '13 at 05:51

Raj Nathani

2,805
1
20
19

CSS3 - scale only the box-shadow with jquery

2 Answers2