html列表太多转为下滑菜单,利用CSS过渡属性Transition制作缓缓弹出的纯CSS下拉菜单...

利用CSS过渡属性Transition制作缓缓弹出的纯CSS下拉菜单

以往文章里面讲了使用CSS的position属性定位结合display制作下拉弹出菜单，名为《纯CSS制作下拉导航菜单》最近又看CSS手册发现另外一个过渡属性(Transition)，可以设置过渡弹出时间，但是遗憾的是：对于IE10以下的版本浏览器不支持。但是在IE10以下版本也是有弹出效果。所以在这里记录分享以下：

先来看以下此CSS属性：

transition-property规定设置过渡效果的 CSS 属性的名称。

transition-duration规定完成过渡效果需要多少秒或毫秒。

transition-timing-function规定速度效果的速度曲线。

transition-delay定义过渡效果何时开始。

备注(不同浏览器兼容代码)：

/* Firefox 4 */

-moz-transition-property:width;

-moz-transition-duration:5s;

-moz-transition-delay:2s;

/* Safari and Chrome */

-webkit-transition-property:width;

-webkit-transition-duration:5s;

-webkit-transition-delay:2s;

/* Opera */

-o-transition-property:width;

-o-transition-duration:5s;

-o-transition-delay:2s;

正常CSS样式：

width:100px;/*原宽度*/