css3动画-transition

当css属性改变的时候，控制animation的速度，让属性的变化发生在一段时间之内，而不是立即生效。

语法

transition: <property> <duration> <timing-function> <delay>;

property：css属性的name， 支持的属性列表 

duration：持续时间

timing-function：运动曲线

一个折叠菜单例子：

 1 <style type="text/css">
 2     ul, li{
 3       list-style:none;
 4       float: left;
 5     }
 6     ul.menu {
 7         overflow: hidden;
 8         width: 50px;
 9         height: 50px;
10     }
11     ul.fold {
12         width: 0px;
13       height: 0px;
14       transition: width 1s, height 1s;
15       -webkit-transition: width 1s, height 1s;
16       -moz-transition: width 1s, height 1s;
17       -o-transition: width 1s, height 1s;
18     }
19     ul.unfold {
20       width: 50px;
21       height: 50px;
22       background-color: #fff;
23       transition: width 1s, height 1s;
24       -webkit-transition: width 1s, height 1s;
25       -moz-transition: width 1s, height 1s;
26       -o-transition: width 1s, height 1s;
27     }
28 </style    

css