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;
}