这是淘宝商品分类的一个bar，当滚动页面时，该条就会成为fixed状态。此时，鼠标悬浮上去，就会从底部向上有个描述圆往上移动的动画，看起来不错。

粗略一想，这个用css3来实现，岂不是很爽，transition只是改动top值即可。

demo：

http://jsfiddle.net/xmlovecss/cFur5/

但是，如果仔细观察的话，这里有个细节。淘宝的小动画，描述圆在向上移动的过程中，就好像是被同样大小的圆形遮罩住了，所以，它显得更加自然，就好像从窗子底部偷偷爬上来似的。

哦，好像明白了什么。查看源码，发现，淘宝用了一个图片背景，圆心是透明的，其它地方同背景色。如下图：

难怪它的结构多了个shadow标签。

好，我们加入shadow层，并设置层叠值为最高，这样就能实现类似的效果了（css能画出来这样的图片么？）。

最后，我们还想给其它不支持transition属性的浏览器，使用js来实现这样的效果，怎么办捏？

 if('transition' in document.body.style){
   //support
 }else {
  //animateCallback
 }

你真以为这么搞就行啦，不行。样式对我们的js动画有影响。也就是，悬浮到图标上时的样式：

.box:hover>.info {
   top:0;
}

支持这个选择器的浏览器（IE7,8,9）不支持transition。在初次悬浮时，该样式会突然把top变为0，这样就影响了js的动画，egg pain。

demo：

http://jsfiddle.net/xmlovecss/N7HpU/

淘宝没有用css3的transition，只是用了js，看来这样也好。