Jquery 带淡入淡出的文本阴影

我有一些文字，并对其应用了一些文字阴影。我想让它表现得像“开/关”

css:

html:

它基本上工作得很好，但我也希望有一个过渡

因为我不知道用jquery做这件事的方法，所以可以用css来做吗？

你可以试试这个

只使用css转换来实现它

希望能帮助你

编辑

如果要自动设置动画，可以尝试设置关键帧

.hi {
    -webkit-animation: text-animate 5s infinite;
    animation: text-animate 5s infinite;
}


@-webkit-keyframes text-animate {
    0%   {text-shadow: 10px 10px 5px #888888;}
    100%  {text-shadow:0}
}
@keyframes text-animate {
    0%   {text-shadow: 10px 10px 5px #888888;}
    100%  {text-shadow: 0}
}

---

您可以使用CSS动画来实现这一点

对于重复，请在动画中包含无限，如示例所示：

body{背景：鲑鱼}/*用于测试目的*/
a、 播音员{
-webkit动画：动画.6s无限；
-moz动画：动画.6s无限；
动画：动画。6秒无限；
} 
/*关键帧*/
@-webkit关键帧动画{
0%{文本阴影：无；}
50%{文本阴影：1px 0px 20px#fff；}
100%{文本阴影：无；}
}
@-moz关键帧设置动画{
0%{文本阴影：无；}
50%{文本阴影：1px 0px 20px#fff；}
100%{文本阴影：无；}
}
@关键帧设置动画{
0%{文本阴影：无；}
50%{文本阴影：1px 0px 20px#fff；}
100%{文本阴影：无；}
}

---

但我不需要它悬停，而是需要它自己打开/关闭。

<a href="#" class="playnowanchor">PLAY NOW</a>

setInterval(function() {
        $('a.playnowanchor').toggleClass('glow');
    }, 400);

.hi {
    -webkit-animation: text-animate 5s infinite;
    animation: text-animate 5s infinite;
}


@-webkit-keyframes text-animate {
    0%   {text-shadow: 10px 10px 5px #888888;}
    100%  {text-shadow:0}
}
@keyframes text-animate {
    0%   {text-shadow: 10px 10px 5px #888888;}
    100%  {text-shadow: 0}
}