鼠標移出背景動畫 - CSS

Question

在這種Fiddle（HTML + CSS），你可以看到，如果你將鼠標放置在「鏈接」兩種，font和background，慢慢REA-動畫，但如果你鼠標移開ONLY字體再次重新動畫。該background只是快速閃爍回

a {background:} 

如何強制的背景動畫，即使鼠標移開時？

Answer 1

你有你只在懸停背景轉換。這意味着如果用戶沒有徘徊，那麼轉換不會被執行。通過給#dolu atransition: 5s而不是transition: color 5s它是固定的。

updated fiddle

完全CSS：

body {background: red; } 

#dolu { 
    position: absolute; 
    bottom: 5px; text-align: 
     center; width: 100%; 
} 

#dolu a:hover { 
    color: white; 
    background: rgb(31, 31, 31); 

} 
#dolu a { 
    color: black; 
    background: white; 
    font-size: 40px; 
    font-weight: bold; 
    font-family: sans-serif; 
    font-variant: normal; 
    text-decoration: none; 
    padding: 10 20 6 20; 
    transition: 5s; 
}