动画处理：用CSS3悬停事件

Question

这里是我的网站：http://adamshort2.hostoi.com/index.html

当你将鼠标悬停在链接资产净值它带来了“丝带”风格的白色方块周围的列表元素，你可以看到。我想要的是从顶部滑动（动画），而不是仅仅出现。如果可能的话，只需坚持CSS，但如果需要，我不介意使用Javascript/Jquery。

Answer 1

这可以用纯CSS来完成。你不能单独使用<a>，因为在背景动画时需要将文本保留在原来的位置。更改背景位置是可能的，但我选择使用另一个元素（特别是伪元素）。

#nav a { 
    /* required to keep absolute background on top */ 
    z-index: 1; 
    /* required to keep text on top of absolute bg */ 
    position: relative; 
    /* not mandatory; makes it look better when animating out 
    because during that time it will be white on white */ 
    transition: color 1s; 
} 

#nav li a:before { 
    background-color: #FFF; 
    border-bottom-left-radius: 15px; 
    border-bottom-right-radius: 15px; 
    display: block; 
    width: 100%; 
    height: 100%; 
    /* element will not appear without this */ 
    content: " "; 
    position: absolute; 
    /* height of the <a> so bg is off screen */ 
    top: -175px; 
    left: 0; 
    transition: top 1s; 
    /* text will appear above bg */ 
    z-index: -1; 
} 
#nav li a:hover { 
    color: red; 
} 
#nav li a:hover:before { 
    top: 0px; 
} 

工作演示：http://jsfiddle.net/cLsue/

Answer 2

只要您不关心与旧版浏览器的兼容性，CSS“transition”属性应该满足您的纯粹CSS解决方案的需求。

以下是包含CSS过渡的2个快速链接。

• http://www.w3schools.com/css3/css3_transitions.asp
• http://www.creativebloq.com/css3/animation-with-css3-712437

Answer 3

如果我可以提一个建议：

在这种情况下，最好的做法是利用CSS3的translate3d的，因为它的硬件加速，而使用left属性为动画没有硬件加速。

有很多文章记录了比较两者时性能的增加。这里有一个例如：http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css

下面介绍如何使用爆丸的例子来实现动画：

#nav a { 
    /* required to keep absolute background on top */ 
    z-index: 1; 
    /* required to keep text on top of absolute bg */ 
    position: relative; 
    /* not mandatory; makes it look better when animating out 
    because during that time it will be white on white */ 
    transition: color 1s; 
} 

#nav li a:before { 
    background-color: #FFF; 
    border-bottom-left-radius: 15px; 
    border-bottom-right-radius: 15px; 
    display: block; 
    width: 100%; 
    height: 100%; 
    /* element will not appear without this */ 
    content: " "; 
    position: absolute; 
    /* height of the <a> so bg is off screen */ 
    /* text will appear above bg */ 
    z-index: -1; 

    -webkit-transform: translate3d(0, -225px, 0); 
    -moz-transform: translate3d(0, -225px, 0); 
    -ms-transform: translate3d(0, -225px, 0); 
    -o-transform: translate3d(0, -225px, 0); 
    transform: translate3d(0, -225px, 0); 
    -webkit-transition: -webkit-transform 1s ease; 
    -moz-transition: -moz-transform 1s ease; 
    -o-transition: -o-transform 1s ease; 
    transition: transform 1s ease; 
    /* Prevents flickering */ 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    -ms-backface-visibility: hidden; 
    -o-backface-visibility: hidden; 
    backface-visibility: hidden; 
} 
#nav li a:hover { 
    color: red; 
} 
#nav li a:hover:before { 
    -webkit-transform: translate3d(0, -50px, 0); 
    -moz-transform: translate3d(0, -50px, 0); 
    -ms-transform: translate3d(0, -50px, 0); 
    -o-transform: translate3d(0, -50px, 0); 
    transform: translate3d(0, -50px, 0); 
}