切換類無法正常使用CSS3動畫

Question

通過使用下面的代碼，我只是試圖切換具有動畫效果的文本陰影，我已經完成了正向流程，但是反向流程無法正常工作。 它正在還原，沒有任何動畫效果。 有人可以幫我解決這個問題嗎？

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);
    }
}

演示

Answer 1

這是演示

@-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

也許只是我的觀點，但這似乎太麻煩了。

新的演示： 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

更簡單的是，這可以通過transition和toggleClass

JSfiddle演示

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