CSS3動畫和懸停過渡

Question

我可以輕松執行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％一樣）。 我確定這不是問題的原因。

即使設置了過渡時間，當鏈接離開時，它只是立即“關閉”動畫，而沒有過渡。

Answer 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>