CSS3 动画和悬停过渡答案

【问题标题】：CSS3 animations AND hover transitionsCSS3 动画和悬停过渡
【发布时间】：2015-02-09 12:53:21
【问题描述】：

我在执行 CSS3 过渡和动画时没有遇到任何问题，但我发现在将它们组合起来没有一些故障时遇到了麻烦。

我有一个链接列表。当用户将鼠标悬停在一个上时，它应该会发光（使用文本阴影），但会缓慢地进出。但是悬停和离开链接应该会在发光和发光之间产生轻微的过渡。我似乎无法让动画顺利结束。由于动画以“发光”开始，这很好，但用户离开链接的那一刻，它恢复到它的 ON 状态，然后转换到 OFF。如果动画在离开时恰好是全亮的，这看起来不错，但如果亮度低，它会先全亮然后熄灭。

我知道需要使用不同的供应商前缀，例如，我将只使用 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%，但使用了“备用”方向参数集，这会产生一个反向循环（就像我设置 0% 50% 和 100% 一样）。我确定这不是问题的原因。

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

【问题讨论】：

你能把你的代码放到 jsfiddle 或 codepen 里吗？

标签： css animation transitions

【解决方案1】：

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

body{
  background:#0077aa;
  }
li {
  font-size:3em;
  -webkit-text-shadow: 0 0 2px rgba(255,255,255,0);
  text-shadow: 0 0 2px rgba(255,255,255,0);
  transition:all 0.5s ease-out;
  -webkit-transition:all 0.5s ease-out;
}

li:hover {
  text-shadow: 0 0 2px rgba(255,255,255,1);
  -webkit-text-shadow: 0 0 2px rgba(255,255,255,1);
}

<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
  </ul>

【讨论】：