-webkit-animation-name: поп в JQuery

Question

Я хотел бы воспроизвести эффект, наблюдаемый на http://madebyelephant.com/ (работает только с браузером webkit), используя JQuery.

Эффект использует:

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

Кто-нибудьзнаете, как воспроизвести ту же поп-анимацию с помощью JQuery?

Answer 1

pop не является стандартной анимацией веб-набора, поэтому им придется определять ее с помощью ключевых кадров в таблице стилей.

Похоже, что слоны масштабируются и выцветают примерно так:

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

У вас нет времени, чтобы сделать jQuery для этого прямо сейчас, но напишите, если вам нужна помощь.

Answer 2

Посмотрите на http://api.jquery.com/animate/ и http://api.jquery.com/category/effects/

Answer 3

Попробуйте

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

or

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

or 

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

Обратите внимание, что он не будет работать чисто для элементов с фоновыми изображениями. Примените его непосредственно к изображениям или div-элементам в стиле css, и они будут работать из коробки!