Я работаю над добавлением анимации нажатия / касания к кнопкам в проекте, над которым я работаю, и столкнулся с неприятной проблемой, связанной с анимацией кнопок, которые отображают и скрывают элементы.

Проект представляет собой одностраничное мобильное веб-приложение с несколькими кнопками. Я использую jQuery, чтобы установить анимацию ключевого кадра css на кнопке, когда она нажата. Кнопка скрывает текущую страницу и показывает новую. Проблема в том, что когда я нажимаю кнопку, страница изменяется до завершения анимации, и анимация приостанавливается, пока контейнер скрыт. Когда контейнер повторно отображается, анимация продолжается с того места, где он был скрыт, затем запускается событие webkitAnimationEnd.

Контейнеры показываются и скрываются с помощью:

display: none;

Я не могу изменить это на:

visibility: hidden;

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

Изменить: для пояснения, это анимация ключевого кадра, которую я применяю в javscript:

@-webkit-keyframes shrink
{
    0%
    {
        -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
    }
    50%
    {
        -webkit-transform: matrix(0.95, 0, 0, 0.95, 0, 0);
    }
    100%
    {
        -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
    }
}

И это яваскрипт, который я должен применить для анимации элемента:

$('body').on(_context.settings.platformInfo.device.touch ? 'touchstart' : 'mousedown', '.shrink', function ()
{
    var $item = $(this);

    $item.one('webkitAnimationEnd', function ()
    {
        $item.css({ '-webkit-animation': 'none' });
    }).css({ '-webkit-animation': 'shrink 250ms forwards' });
});