-webkit-animation-name: pop in jQuery

I would like to reproduce the effect observed at http://madebyelephant.com/ (works only with webkit browser) using jQuery.

The effect uses:

-webkit-animation-name: pop;
-webkit-animation-duration: .5s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;

Does anyone know how to play the same pop animation using jQuery?

+3
source share
3 answers

pop is not a standard webkit animation, so they need to define it with keyframes in the stylesheet.

The elephants seem to scale and disappear like this:

@-webkit-keyframes pop {
    from {
        -webkit-transform: scale(.1);
        opacity: 0;
    }
    85% {
        -webkit-transform: scale(1.05);
        opacity: 1;
    }
    to {
        -webkit-transform: scale(1);
    }
}

jQuery , , .

+1

Try

$(this).toggle("scale", { percent: 0 }, 1000);

or

$(this).hide("scale", {percent: 700, origin: 'center', fade: 'hide' }, 2000);

or 

$(this).hide("scale", {}, 1000);

Note that this will not work for elements with background images. Apply it directly to images or css-styled divs and will work out of the box!

0
source

Source: https://habr.com/ru/post/1783847/


All Articles