Javascript 使用css3动画切换未按预期工作的类

通过使用下面的代码，我刚刚尝试用动画效果切换文本阴影，我已经对正向流进行了切换，但反向流无法顺利工作。它正在恢复，没有任何动画效果。有人能帮我修一下吗

HTML:

CSS:

---

也许只是我的机会，但这似乎太难了

新演示：

---

也许只是我的机会，但这似乎太难了

新演示：

---

更简单的是，这可以通过转换和

toggleClass

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

---

更简单的是，这可以通过转换和

toggleClass

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

---

@DominicTobias这不是我的代码，我只是使用OP提供的。@DominicTobias这不是我的代码，我只是使用OP提供的。

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

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

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