Estou trabalhando na adição de animações clique / toque nos botões de um projeto em que estou trabalhando, e me deparei com um problema frustrante em relação à animação de botões que mostram e ocultam elementos.

O projeto é um aplicativo da web móvel de página única com vários botões. Estou usando o jQuery para definir uma animação de quadro-chave css em um botão quando ele é pressionado. O botão oculta a página atual e mostra uma nova. O problema é que, quando clico no botão, a página é alterada antes que a animação seja concluída e a animação é pausada enquanto o recipiente está oculto. Quando o contêiner é mostrado novamente, a animação continua de onde estava oculta e, em seguida, o evento webkitAnimationEnd é acionado.

Os contêineres são mostrados e ocultados com:

display: none;

Eu não posso mudar isso para:

visibility: hidden;

porque o contêiner ainda ocupará espaço. Há alguma maneira simples de forçar a remoção da animação quando o elemento se torna invisível ou forçar a animação a continuar quando o container está oculto?

Edit: Para esclarecimento, esta é a animação de quadro-chave que estou aplicando no 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);
    }
}

E este é o javascript que tenho para aplicar a animação ao elemento:

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