Estoy trabajando para agregar animaciones de clic / toque a los botones de un proyecto en el que estoy trabajando, y me he encontrado con un problema frustrante relacionado con los botones de animación que muestran y ocultan elementos.

El proyecto es una aplicación web móvil de una sola página con un puñado de botones. Estoy usando jQuery para establecer una animación de fotograma clave css en un botón cuando se presiona. El botón oculta la página actual y muestra una nueva. El problema es que cuando hago clic en el botón, la página cambia antes de que se complete la animación, y la animación se detiene mientras el contenedor está oculto. Cuando se vuelve a mostrar el contenedor, la animación continúa desde donde estaba oculta, luego se activa el evento webkitAnimationEnd.

Los contenedores se muestran y ocultan con:

display: none;

No puedo cambiar esto a

visibility: hidden;

Porque el contenedor aún ocupará espacio. ¿Hay formas sencillas en las que pueda forzar la eliminación de la animación cuando el elemento se vuelve invisible o forzar la continuación de la animación cuando el contenedor está oculto?

Edición: para aclarar, esta es la animación de fotogramas clave que estoy aplicando en el 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);
    }
}

Y este es el javascript que tengo para aplicar la animación al 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' });
});