Tumblr如何爲其導航欄鏈接創建如此平滑的懸停效果？沒有JavaScript可能嗎？

Question

將鼠標懸停在Tumblr儀表板上的導航欄鏈接（例如文本，圖片，引用）上可以創建一個平滑的效果，圖標上升約5-10個像素，然後逐漸回落到位，就好像有動畫一樣。

Tumblr控制檯：http://www.tumblr.com/dashboard

使用純CSS來達到同樣的效果（即位置：相對;頂部：-8px）在我們的網站時的圖標立即推到地方創建了一個不和諧的效果。

有沒有一種方法可以在沒有JavaScript的情況下實現這種效果？

謝謝！

Answer 1

他們使用CSS3過渡效果DEMO http://jsfiddle.net/kevinPHPkevin/xejsM/500/

a { 
    color:blue; 
    /* First we need to help some browsers along for this to work. 
    Just because a vendor prefix is there, doesn't mean it will 
    work in a browser made by that vendor either, it's just for 
    future-proofing purposes I guess. */ 
    -o-transition:color .2s ease-out, background 2s ease-in; 
    -ms-transition:color .2s ease-out, background 2s ease-in; 
    -moz-transition:color .2s ease-out, background 2s ease-in; 
    -webkit-transition:color .2s ease-out, background 2s ease-in; 
    /* ...and now for the proper property */ 
    transition:color .2s ease-out, background 2s ease-in; 
}