CSS reveal from corner animation

I am trying to achieve an animation effect as follows:

When a banner is shown, the bottom right corner of the next banner should be visible. When you click on this corner, it should hide the current banner and reveal the next one.

My current markup is as follows:

<div class="banners">
    <div class="image active" style="background-color: red;">
        <div class="corner"></div>
    </div>

    <div class="image" style="background-color: blue;">
        <div class="corner"></div>
    </div>
</div>

CSS as follows: Notice I used clip-path to create the corner:

.banners {
    width: 800px;
    height: 600px;
}

.image {
     width: 100%;
     height: 100%;
     position: absolute;
     left: 0;
     top: 0;
}

.image.active {
     z-index: 1;
     clip-path: polygon(100% 0, 100% 65%, 60% 100%, 0 100%, 0 0);
}

.corner {
    width: 50%;
    height: 50%;
    position: absolute;
    right: 0;
    bottom: 0;
}

JS:

$(document).ready(function () {
    $('.corner').click(function() {
        $('.image.active').removeClass('active');
        $(this).parent().addClass('active');
    });
});

Here is a JSFiddle of all the above code: https://jsfiddle.net/cqqxjjgu/

One immediate issue with this is that because I'm using z-index to specify that the current 'active' banner should have precedence, when remove the active class it just displays the next banner immediately, so ideally the z-index should only be changed once the animation has completed.

Does anyone have anyt idea how I can achieive this? Ideally I need a cross browser solution (not too fussed about IE < 10).