CSS3动画和悬停过渡

我在执行CSS3转换和动画方面没有问题，但是我发现在没有小故障的情况下很难将它们结合起来

我有一个链接列表。当用户将鼠标悬停在一个屏幕上时，它会发光（使用文本阴影），但会缓慢地来回跳动。但悬停和离开链接应该会在光晕中产生轻微的过渡。我似乎无法让动画顺利结束。由于动画以“辉光进入”开始，这很好，但当用户离开链接时，它将恢复为“打开”状态，然后转换为“关闭”。如果在离开时动画恰好处于完全打开状态，这看起来很好，但如果辉光较低，它将首先完全打开闪烁，然后熄灭

我知道需要使用不同的供应商前缀，例如，我将只使用webkit版本：

li {
  text-shadow: 0 0 2px rgba(255,255,255,0);
  -webkit-transition: 0.5s;
}

li:hover {
  text-shadow: 0 0 2px rgba(255,255,255,1);
  -webkit-animation: blink 0.5s ease-in-out infinite alternate;
}

@-webkit-keyframes blink { 
    0% { text-shadow: 0 0 2px rgba(255,255,255,0) }
    100% { text-shadow: 0 0 2px rgba(255,255,255,1) }
}

请注意，我只使用了0%和100%，但设置了“alternate”方向参数，这会产生一个反向循环（与设置0%50%和100%相同）。我相信这不是问题的原因

---

当链接离开时，它只是立即“关闭”动画，没有过渡，即使我设置了过渡时间。

不要使用动画，只使用悬停和过渡

正文{
背景：#0077aa；
}
李{
字号：3em；
-webkit文本阴影：0 0 2pxRGBA（255255,0）；
文本阴影：0 0 2pxRGBA（255255,0）；
过渡：所有0.5s缓解；
-webkit过渡：所有0.5s都可以轻松过渡；
}
李：悬停{
文本阴影：0.02×rgba（255255,1）；
-webkit文本阴影：0 0 2pxRGBA（255255,1）；
}

首先
第二
第三

您可以将代码放入JSFIDLE或codepen中吗？