CSS Animation pausing when element is hidden

Question

I'm working on adding click/touch animations to buttons on a project I'm working on, and I've come across a frustrating problem concerning animating buttons which show and hide elements.

The project is a single page mobile web app with a handful of buttons on it. I'm using jQuery to set a css keyframe animation on a button when it's pressed. The button hides the current page, and shows a new one. The problem is, when I click the button, the page changes before the animation is complete, and the animation is paused whilst the container is hidden. When the container is re-shown, the animation continues from where it was hidden, then the webkitAnimationEnd event triggers.

The containers are shown and hidden with:

display: none;

I can't change this to:

visibility: hidden;

because the container will still take up space. Are there any simple ways I can force the animation to be removed when the element becomes invisible, or force the animation to continue when the container is hidden?

Edit: For clarification, this is the keyframe animation I'm applying in the 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);
    }
}

And this is the javascript I've got to apply the animation to the element:

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

Answer 1

You could put the CSS definition of the animation in a separate class and add or remove this extra class based on visibiity:

#SomeDiv{ .... }
.MyAnimation{ .... }

$('#SomeDiv').addClass('MyAnimation').show();
$('#SomeDiv').hide().removeClass('MyAnimation');

Answer 2

You could try setting visibility: hidden; but also absolutely position the element off-screen, e.g position: absolute; left: -500px; /* Or whatever it takes */. In fact, you might not even need to set the visibility. It feels a bit hacky though.