javascript - 切换类不能按预期使用 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);
    }
}

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