Tumblr如何为其导航栏链接创建如此平滑的悬停效果？没有JavaScript有可能吗？

Question

将鼠标悬停在Tumblr仪表板上的导航栏链接(例如，文本、照片、引用)上可创建平滑的效果，其中图标上升约5-10个像素，然后逐渐落回原处，就像有动画一样。

Tumblr仪表板：http://www.tumblr.com/dashboard

在我们的网站上使用普通的CSS来达到同样的效果(即位置:相对；顶部：-8px)，当图标立即弹回原处时，会产生刺耳的效果。

有没有办法在没有JavaScript的情况下实现这种效果？

谢谢!

Answer 1

他们使用CSS3过渡效果演示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;
}