CSS3動畫和懸停轉換

我沒有任何困難執行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％，但與「替代」方向參數設置，這產生了一個反向循環（相同，如果我設置0％50％和100％）。我相信這不是問題的原因。

即使我已經設置了轉換時間，它只是在鏈接離開時立即「關閉」動畫，不會轉換出來。

來源

2014-12-11 Eric Barker

你可以把你的代碼放到一個的jsfiddle或codepen？ – Todd 2014-12-11 05:40:26

不使用動畫只是使用懸停和過渡

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>

來源

2014-12-11 07:55:39 Suresh

CSS3動畫和懸停轉換

回答

相關問題