CSS transition stops abruptly on mouseout - css

Question

I am talking about this example (badAdviceGuy created it for me):
Grid css transition
.wrapper {
width: 300px;
}
li {
display: inline-block;
height: 40px;
width: 40px;
position: relative;
padding: 3px;
}
a {
display: block;
height: 40px;
width: 40px;
background: lightblue;
position: absolute;
-webkit-transition: .3s;
transition: .3s;
}
a:hover {
-webkit-transform: scale(2,2);
transform: scale(2,2);
z-index: 100;
background: lightgreen;
}
When I hover fast over the grid elements, the zoom effect abruptly stops, as soon as I'm out of the element. Well actually I read it does not stops, but reverts immediately when mouse is out again:
Starting and Reversing a Transition:
In general when a transition starts it must complete according to the transitionproperties set even if those properties are changed by another action. However at times it doesn’t make sense to do this.
A common case is mousing over an element that starts a transition and then quickly mousing out. The rule above says the :hover transition has to complete before transitioning back to it’s initial value, however this doesn’t match expected behavior.
Expected behavior is that on mouse out the original transition stops and immediately moves in reverse. This is what the spec calls for.
You can read the technical explanation about how this is accomplished, but the gist is that whatever part of the transition has happened up to the point where the mouse-out occurred now happens in reverse.
You don’t have to do anything to make this happen either. It’s all automatic.
My problem is that I do not want that.
I used to have a Javascript which does a fine full transition till finished, so I could swipe over all the grid, and single tiles move slowly out, and continue when I'm out of the tile area.
Would there be a easy and straight forward way to accomplish such in css?