Toggling classes not working as expected with css3 animation

Question

By using the below code i was just tried to toggle the text shadow with animating effect, i had done it for the forward flow but the reverse flow is not working smoothly. It is reverting without any animation effect. Can anybody help me to fix this.?

HTML:

<h1>testing testing testing</h1>

<button>glow</button>
<button>unglow</button>

JS:

$(':button:contains(glow)').click(function () {
    $('h1').addClass('shadow');
});

$(':button:contains(unglow)').click(function () {
    $('h1').addClass('removeShadow');
});

CSS:

h1.removeShadow {
    -webkit-animation: removeGlow 1s 1;
    -webkit-animation-fill-mode:forwards;
}
@-webkit-keyframes removeGlow {
    to {
        text-shadow: 1px 0px 0px rgba(0, 0, 0, 0);
    }
}
h1.shadow {
    -webkit-animation: glow .7s 1;
    -webkit-animation-fill-mode:forwards;
}
@-webkit-keyframes glow {
    to {
        text-shadow:1px 1px 10px rgb(255, 153, 0), 1px 1px 10px rgb(255, 153, 0), 1px 1px 10px rgb(255, 153, 0);
    }
}

DEMO

Answer 1

Here is the DEMO

@-webkit-keyframes removeGlow {
    from {
        text-shadow:1px 1px 10px rgb(255, 153, 0), 1px 1px 10px rgb(255, 153, 0), 1px 1px 10px rgb(255, 153, 0);
    }

    to {
        text-shadow:none;
    }
}

Answer 2

Maybe just my oppinion but that seems to be too much of a struggle.

New demo: http://jsfiddle.net/Z6k8V/5/

h1
{
    transition-duration: 1s;
    transition-property: text-shadow;
}
h1.shadow
{
    text-shadow:1px 1px 10px rgb(255, 153, 0), 1px 1px 10px rgb(255, 153, 0), 1px 1px 10px rgb(255, 153, 0);
}

Answer 3

Even simpler, this can be done with a transition and toggleClass

JSfiddle Demo

CSS

h1 {
    transition:text-shadow 1s ease;
}
.shadow {
        text-shadow:1px 1px 10px rgb(255, 153, 0), 
        1px 1px 10px rgb(255, 153, 0), 
        1px 1px 10px rgb(255, 153, 0);
}

JQuery

$(':button:contains(glow)').click(function () {
    $('h1').toggleClass('shadow');
});